使用Vue.JS Onclick

Question

我有这两个按钮：

<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')"

你能帮帮我吗?

Answer 1

可以通过在按钮上具有属性v-on:click="filterSelection(genre)"来执行此操作。

编辑:忘记引用。

Answer 2

由于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=