Vue.js bind id to onclick function

Question

I have a Vue template that loops through an array and creates a table. Each item in the table also gets a button that I want to bind a click event to, passing in a token that will be used in the click function.

I got the following error when I tried passing in the token using interpolation:

onclick="getClickedResult({{result.reportToken}})": 
Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. 
For example, instead of <div id="{{ val }}">, use <div :id="val">

I understand that I can bind the click function using v-on:click="setClickedResult()" or I can attach the token to the button using :id="val" but I am confused on how to combine these so that the token gets passed into the function correctly.

Answer 1

What about this:

<div v-on:click="getClickedResult(result.reportToken)">Click me!</div>

Or with the @ shorthand:

<div @click="getClickedResult(result.reportToken)">Click me!</div>

You don't need interpolation ( {{ ... }} ) inside v-on attributes.