如何在VueJS中实现多个计数器
如何在VueJS中实现多个计数器
提问于 2018-12-20 00:31:42
我是一个初学者，我现在正在做一个小练习，我需要实现一个函数，每当我们点击" vote“按钮时，就会为特定的图片投票。
下面是它的样子，例如，如果我点击第一个按钮，我需要增加这张图片的投票数。下面是我所做的：
<div id="display" class="container">
<table class="w3-table-all" id="tableDisplay">
<tr>
<th>Cat</th>
<th>Vote</th>
</tr>
</table>
<div v-for="display in gridData">
<table class="w3-striped w3-table-all table table-bordered" id="tableDisplay">
<tr class="w3-hover-light-grey">
<th>
<img :src="display.url" height="200px" width="300px"/>
</th>
<th>
<button class="w3-button w3-green w3-hover-light-green"v-on:click="test(display.counter,display.id)" v-bind:id="display.id">Vote !</button>
</th>
</tr>
</table>
</div>
</div>而vueJs部分：
new Vue({
el :'#display',
data: {
gridData :[
{
"url": "http://24.media.tumblr.com/tumblr_m82woaL5AD1rro1o5o1_1280.jpg",
"id": "MTgwODA3MA",
"counter" : 0
},
{
"url": "http://24.media.tumblr.com/tumblr_m29a9d62C81r2rj8po1_500.jpg",
"id": "tt",
"counter" : 0
}
],
},
methods:{
test: function(count,id){
count ++;
alert(count);
}
},
})问题是，它没有更新更改，在“计数器”部分，它仍然是0。
谢谢你的帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53855437
复制相关文章
相似问题