Блог

У меня есть эти две кнопки:

 <button onclick="filterSelection('Action')">Action</button>
  

и

 <button onclick="filterSelection('Adventure')">Adventure</button>
  

Теперь я хочу сделать то же самое, но с Vue.JS, поэтому я создал этот массив на своем app.js

 genres: [{name: 'Action'}, {name:'Adventure'}]
  

И в моем HTML-файле:

 <button v-for="genre of genres">{{genre.name}}</button>
  

Это работает нормально, но я не знаю, как добавить свойство с помощью Vue.JS:

 onclick="filterSelection('genre')"
  

Можете ли вы мне помочь?

Вы можете сделать это, имея атрибут v-on:click="filterSelection(genre)" на вашей кнопке.

Редактировать: Забыл кавычки.

Поскольку vue использует виртуальный dom, вы не можете использовать события «собственного html».

Вместо этого вы определяете события щелчка с помощью обработчика событий [docs]

 <div id="example-1">
  <button v-on:click="counter  = 1">
    Add 1
  </button>
  <p>
    The button above has been clicked {{ counter }} times.
  </p>
</div>
  

в качестве альтернативы вы можете использовать сокращение для v-on и использовать @ символ, подобный @click=