Vue: клик автоматически запускается внутри v-for - PullRequest
Новая
       9

Vue: клик автоматически запускается внутри v-for

0 голосов
/ 27 апреля 2018

У меня есть v-for looping и элементы внутри него: щелчок, вызывающий функцию. Эта функция запускается автоматически для каждого элемента при загрузке страницы! 

<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 в журнале консоли

1 Ответ

0 голосов
/ 27 апреля 2018

Должно быть: 

@click="removeItem(item.id)"

Не: 

:click="removeItem(item.id)"

Если у вас есть :click="removeItem(item.id)", вы фактически связываете результат вызова метода removeItem(item.id) со свойством click. Вот почему метод выполняется "автоматически".

@click="handler" - сокращение от до v-on:click="handler" - директива обработки событий .

:click="handler" - сокращение от до v-bind:click="handler", директива связывания свойств .

...