我有一個 vuejs 專案，當點擊每個綠色框時，它會將資料附加到螢屏上。現在，我未定義，但理想情況下它需要顯示指定的框的描述
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>在 vue 模型中找到取決于選擇了哪個框。知道為什么我沒有定義嗎？
uj5u.com熱心網友回復：
在您正在使用的事件處理程式中，this.choc它是未定義的，因為它不存在于 vue 模型中。您需要將choc物件傳遞給您的事件處理程式：
<div class="carousel-cell-card" v-on:click="handleTileClick(choc)"></div>
然后在那里使用它
handleTileClick: function(choc) {
$("#fox").append(`<div id="popover-dialog">data here: ${choc.description}</div>`);
}
uj5u.com熱心網友回復：
您需要發送被點擊的特定專案作為您的函式的引數，如下所示：
v-on:click="handleTileClick(choc)"
然后在你的函式中
handleTileClick: function(choc){
$("#fox").append(`<div id="popover-dialog">data here: ${choc.description}
</div>`);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/364150.html
標籤：javascript Vue.js