How to pass variable on a function inside v-on:click or @click in VUEJS?

Question

I'm developing a system with vuejs right now. I would like to know if how am I going to pass a variable value inside v-on:click or @click? this is my code:

The props.row contains an object with a key of '_id' and what I want to do is to pass that to the function 'view'.

<q-td key="status" :props="props">
    <q-btn color="primary"  label="view" v-on:click="view({{props.row._id}})"  icon="remove_red_eye" /> 
</q-td>

The program crashes.

Answer 1

You can directly pass _id in @click without using .native. Do not confuse native events with the Vue events emitted by the component. They are different things.

<q-td key="status" :props="props">
     <q-btn color="primary"  label="view"  @click="view(props.row._id)" icon="remove_red_eye" />
    </q-td>

See this Document(https://quasar-framework.org/guide/quasar-upgrade-guide.html#Some-components-need-native-modifier-for-events-now) for more detail.

Answer 2

Just in! Just resolve my own problem. lol this is what I did:

  <q-td key="status" :props="props">
         <q-btn color="primary"  label="view"  @click.native="view(props.row._id)" v-on icon="remove_red_eye" />
        </q-td>