Question

我有v-for循环，里面的元素有：点击调用一个函数。页面加载时每个元素都会自动触发该函数！

<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>



export default {
 data: () => ({
  itemSaved: [{"id":1, "name":"Jim"},{"id":2, "name":"Max"}]
}),
methods: {

  addItem: function(id){
    console.log('add item ' + id)
  }, 
  removeItem: function(id){
    console.log('remove item ' + id)
  }
}
}

基本上我在控制台日志中获得了add item 1和add item 2的列表

Answer 1

应该是：

@click="removeItem(item.id)"

不

:click="removeItem(item.id)"

当你有:click="removeItem(item.id)"时，你实际上是将removeItem(item.id)方法调用的结果绑定到click属性。这就是该方法自动执行＆＃34;。

的原因

@click="handler" is a shorthand至v-on:click="handler" - event handling directive。

:click="handler" is a shorthand至v-bind:click="handler"，property binding directive。

Vue：在v-for中自动触发click

1 个答案: