v-for not passing along the correct / expected index

[denjaland]

Hi,

I've searched through the docs and the issues logged on the library, but I'm still a bit fuzzled as to whether the foliowing is supposed to be supported.

Consider an invoice form where user can add lines. We set up CTRL-A for adding lines. Now what I want to achieve is that when a user is on one of these lines, he can do CTRL-DEL to delete that line.

This is what we have:

<tr v-for="(element, index) in invoice.elements" :key="index" v-shortkey.once="['ctrl', 'del']" @shortkey="delete_line(index)" >
  <td>
    <input/>
  </td>
  <td>
    <input/>
  </td>
</tr>

the goal is that whenever a user is focused on one of the elements in the row, it deletes that particular row.

For some reason, when I do a console.log(index) in the delete_line() method, it always has the number of rows in invoice.elements (basically, it gives the "last" index of the array.

I have tried moving the `v-shortkey.once="['ctrl', 'del']" @shortkey="delete_line(index)"' bit onto all the individuals input elements in such a row, but with no success.

Is this supposed to be supported? If so, what am I doing wrong?

Thanks for a very nice package!

David.

[fgr-araujo]

Ok! first of all, you can do what you want. Second one, vue-shortkey will only dispatch the action but not for each element.

I suggest to you following this approach: https://codepen.io/FagnerAraujo/pen/OGGxom

Let me know if it help!

[denjaland]

Hi, yes - that’s the workaround I had in my mind. Just wanted to double check whether it was supposed to work “out of the box” and whether I did something wrong... thanks!

[fgr-araujo]

you're welcome! I will close this and if you want some help, i'm here!