How to hang an event handler in a view depending on the check?

Question

Vue.js

There is a table, I need to call the method by pressing tab in the last td, td are rendered through v-for, how to hang the right moment on the right td?

Answer 1

The first thing that came to mind, but I think there is a more effective option.

<table class="table">
  <tr>
    <td v-for="(user, index) in users" v-if="index !== users.length - 1">{{ user.name }}</td>		
    <td v-for="(user, index) in users" v-if="index === users.length - 1" @click="tabAction">{{ user.name }}</td>
  </tr>
</table>

UPD: well, or put a check in the method so as not to clog the template with conditions
But in general, below 0xD34F suggested a better solution =)

<td v-for="(user, index) in users" v-if="!isThisLastIndex(users, index)">{{ user.name }}</td>		
<td v-for="(user, index) in users" v-if="isThisLastIndex(users, index)" @click="tabAction">{{ user.name }}</td>
...

isThisLastIndex(users, index) {
  return index === users.length - 1
}

Answer 2

if you are not too lazy to generate a unique id for each element, then you will never have problems accessing any element at any time on any event, and your html code will be pristine and not clogged with all this rubbish

Answer 3

google:
vue if last child
https://stackoverflow.com/a/41629937/5671005
by analogy bind function or null