vuejs click event displays correct item of array when clicked-CodePudding

I have a vuejs project where when each of the green boxes is clicked it appends data to the screen. Right now, I get undefined, but ideally it needs display the designated description for the box that is

new Vue({
  el: "#app",
  data: {
    chocs: [
      { text: "Learn JavaScript", description: "yello" },
      { text: "Learn Vue", description: "white" },
      { text: "Play around in JSFiddle", description: "blue"},
      { text: "Build something awesome", description: "orange" }
    ]
  },
  methods: {
    handleTileClick: function(){
$("#fox").append(`<div id="popover-dialog">data here: ${this.choc.description}</div>`);
    }
  }
})

.main-carousel {
        background: #464646;
        padding-block: 1rem;
      }

      .carousel-cell-container {
        width: 24%;
      }

      .carousel-cell {
        width: 24%;

        position: relative;
      cursor: pointer;
      overflow: visible;
 
      }

      .carousel-cell-card {
        height: 200px;
        position: relative;
        background: #8c8;
        border-radius: 5px;
      }

      .carousel-cell .caption {
        text-align: center;
        padding-block: 0.5rem;
        box-sizing: border-box;
        color:red;
      }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous"></script>
<div id="app">
<div v-for="(choc,index) in chocs" class="carousel-cell" :key="'chocs-'   index">
<div class="img-icon">
<div class="carousel-cell-card" v-on:click="handleTileClick()"></div>
</div>
<div class="caption">{{ choc.text }}</div>
</div>
</div>
<div id="fox">

</div>

found in the vue model depending on which box has been selected. any idea why i get undefined?

CodePudding user response：

Inside your event handler you are using this.choc which would be undefined because it does not exist in the vue model. You need to pass the choc object to your event handler:

<div class="carousel-cell-card" v-on:click="handleTileClick(choc)"></div>

and then use it there

handleTileClick: function(choc) {
  $("#fox").append(`<div id="popover-dialog">data here: ${choc.description}</div>`);
}

CodePudding user response：

you need to send the specific item that was clicked as an argument of your function like this :

v-on:click="handleTileClick(choc)"

then in your function

handleTileClick: function(choc){
    $("#fox").append(`<div id="popover-dialog">data here: ${choc.description} 
    </div>`);
  }