Inside v-for shortcut is calling receiving the last item by default

[rahulrajpal2911]

Hi, First of all thank you for this plugin, it really helped me a lot. <div class="list-group" v-if="items.data"> <div class="list-group-item" v-for="(item, index) in items.data" :key="item.id" v-shortkey="{create: ['alt', 'c'], edit: ['ctrl', 'enter']}" @shortkey="doSomeAction($event, item.id)" > {{ item.name }} </div> </div> When if I press ctrl+enter then I'm getting the last element item id instead of that particular element.

I tried to change the v-for in parent's element but, still I am getting the same problem.

Can you please guide me?

[PabloLION]

I cant see it clearly what is ur problem. I don't really think the problem is from this package.

• (where to ask) If you want to ask general questions you can ask on some community like stackoverflow.
• (how to ask) And even better you can use jsfiddle to write your code (I could not help because of the absence of the context)
• (tips) Lastly, when you quote a block of code, better use code block and use indent (2/4 spaces or tab)

  <div class="list-group" v-if="items.data">
  <div
  class="list-group-item"
  v-for="(item, index) in items.data"
  :key="item.id"
  v-shortkey="{create: ['alt', 'c'], edit: ['ctrl', 'enter']}"
  @shortkey="doSomeAction($event, item.id)"
  >{{ item.name }}</div>
  </div>

  stay safe. gl.

[fgr-araujo]

You're welcome! So.. I think it's more about architecture. In your case you need to set what the element can be dispatch the action. Is on focus? when it clicked? And put the shortkey directive only in your parent element.

For example, you have a list and when you click in the element, the shortkey need to dispatch an action with the id of the element:

<div
  class="list-group"
  v-if="items.data"
  v-shortkey="{create: ['alt', 'c'], edit: ['ctrl', 'enter']}"
  @shortkey="doSomeAction($event, selectedId)">
  <div
    class="list-group-item"
    v-for="(item, index) in items.data"
    :key="item.id"
    @click="() => selectedId = item.id">
    {{ item.name }}
  </div>
</div>
<script>
  ...
  data: () => ({
    selectedId: null
  })
</script>

[rahulrajpal2911]

You're welcome! So.. I think it's more about architecture. In your case you need to set what the element can be dispatch the action. Is on focus? when it clicked? And put the shortkey directive only in your parent element.

For example, you have a list and when you click in the element, the shortkey need to dispatch an action with the id of the element:

<div
  class="list-group"
  v-if="items.data"
  v-shortkey="{create: ['alt', 'c'], edit: ['ctrl', 'enter']}"
  @shortkey="doSomeAction($event, selectedId)">
  <div
    class="list-group-item"
    v-for="(item, index) in items.data"
    :key="item.id"
    @click="() => selectedId = item.id">
    {{ item.name }}
  </div>
</div>
<script>
  ...
  data: () => ({
    selectedId: null
  })
</script>

@iFgR Thanks a lot man, the below solution is working like charm.

v-on:keyup="() => selectedId = item.id"