Vue中v-for循环内:click事件页面加载时自动触发问题

嘿，我一眼就发现你代码里的问题啦！你现在遇到的情况是因为错误地在:click绑定里直接执行了函数，而不是把函数本身绑定给点击事件。

问题根源 #

当你写:click="addItem(item.id)"的时候，Vue在渲染每个列表项时，会立即执行这个表达式（也就是直接调用addItem(item.id)），而不是等到用户点击才触发。这就导致页面加载时所有绑定的函数都自动跑了一遍——这显然不是你想要的效果。

修复方案 #

你需要把函数调用包装在一个箭头函数里，这样Vue会把这个箭头函数绑定给点击事件，只有当用户点击时才会执行内部的函数调用。具体修改如下：

<li v-if="itemSaved.length > 0" v-for="(item, index) in items" class="list-group-item">
  <div class="pull-right m-l">
    <i v-if="itemSaved[index] == 'not saved'" class="icon-plus" :click="() => addItem(item.id)"></i>
    <i v-else class="icon-check" :click="() => removeItem(item.id)"></i>
  </div>
</li>

补充说明 #

如果你不需要传递参数，直接写:click="addItem"就可以（不带括号），Vue会自动把事件对象作为参数传给函数。但因为你需要传递item.id这个参数，所以用箭头函数来包裹是最直接的方式。

另外，也可以用bind语法来实现，比如:click="addItem.bind(null, item.id)"，不过箭头函数的写法更直观易懂，现在也更常用。

内容的提问来源于stack exchange，提问作者Kal