Onclick 与 Vue.JS

Question

I have this two buttons:

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

and

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

Now, I want to do the same but with Vue.JS, so I created this array on my app.js

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

And in my HTML file:

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

That's works fine, but I don't know how to add the propertie with Vue.JS:

onclick="filterSelection('genre')"

Can you help me?

Answer 1

You can do this by having the attribute v-on:click="filterSelection(genre)" on your button.

Edit: Forgot quotes.

Answer 2

Since vue uses a virtual dom, you cannot use the "native html" events.

Instead you define click events via an event handler [ 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>

alternatively you can use the shorthand for v-on and use the @ symbol like @click=