我是一个初学者,现在正在研究一个小练习,我需要实现一个功能,每次我们单击“投票”按钮时,该功能都会为特定图片投票。
这是它的外观,例如,如果我单击第一个按钮,则需要增加这张图片的投票数。 这是我所做的:
<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。
谢谢您的帮助。
答案 0 :(得分:0)
将<div v-for="display in gridData">
更改为<div v-for="(display, idx) in gridData">
,以便知道所使用的数组中的哪个项目。
v-on:click="test(display.counter,display.id)
至v-on:click="test(idx)
和test
函数用于:
test: function(idx) {
this.gridData[idx].count++;
}
这样您就可以增加数组项的计数。
当前,您只是在增加无能为力的自变量count
(在test
范围结束后终止的实例变量)。
参见下文:
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(idx) {
this.gridData[idx].counter++;
}
},
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<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,idx) 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>
<div>Current Votes: {{display.counter}}</div>
<button class="w3-button w3-green w3-hover-light-green" v-on:click="test(idx)" v-bind:id="display.id">Vote !</button>
</th>
</tr>
</table>
</div>
</div>
答案 1 :(得分:0)
具有此类功能的重复元素是组件非常方便的地方。将单个项目显示分成自己的子组件,如下所示:
<div v-for="display in gridData">
<vote-widget :picture="display"></vote-widget>
</div>
每个人都有自己的数据和孤立的范围。