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?
>Solution :
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>`);
}