Execute method on enter key VueJS?

Question

I am using vuetify and trying to create a method to add chips from the dropdown. Now i got most of the logic down but as you can see, the method multipleSelection does not fire off on the enter key but works fine onClick. Here is a demo for the codepen. So the method multipleSelection should fire off on the enter key.

new Vue({
  el: '#app',
  data() {
    return {
      arr: [],
      items: [{
          text: 'Foo',
          value: 'foo'
        },
        {
          text: 'Bar',
          value: 'bar'
        },
        {
          text: 'biz',
          value: 'buzz'
        },
        {
          text: 'buzz',
          value: 'buzz'
        }
      ],
    }
  },
  methods: {
    multipleSelection(item) {
      this.arr.push(item)
      console.log(this.arr)
    },
    deleteChip(item) {
      console.log('delete')
      this.arr = this.arr.filter(x => x !== item);
      console.log(this.arr)
    }
  },
})

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>

<div id="app">
  <v-app id="inspire">
    <v-container>
      <v-combobox :items="items" label="Add Multiple Chips" multiple small-chips solo deletable-chips :value="arr">
        <template v-slot:item="{ index, item }">
      <v-list-tile-content @click.stop.prevent="multipleSelection(item)">
        {{item.text}}
      </v-list-tile-content>
    </template>
        <template v-slot:selection="{ index, item }">
      <v-chip close dark color="info" @click:close="deleteChip(item)">
        {{ item.text }}
      </v-chip> 
    </template>
      </v-combobox>
    </v-container>
  </v-app>
</div>

Any help will be appreciated. Thank you.

You're confusing a hover state and a selection. They just have the same CSS. When you hover over an item you cannot interact with it directly because you haven't selected anything. When you use the arrow keys to navigate between items and press 'enter' it works fine to toggle it. This is the material design. — Ohgodwhy
– Ohgodwhy, Commented Feb 10, 2020 at 22:04
Because @click.stop.prevent is not @keypress.enter.prevent — Ohgodwhy
– Ohgodwhy, Commented Feb 10, 2020 at 22:08
@Ohgodwhy @keypress.enter.prevent doesn't seem to fire off that method or even work for me. — Somethingwhatever
– Somethingwhatever, Commented Feb 10, 2020 at 22:12

Richard Matsen · Accepted Answer · 2020-02-12 00:09:45Z

1

Since multipleSelection() is not being called from @keypress on v-slot:item, likely it's not where the event is being captured.

Taking a look at events on Vue Dev Tools, can see input $emit by <VCombobox> is the first one after pressing Enter.

So the following will get it, but this seems to mess with the position in the list for some reason I don't understand.

<v-combobox
  ...
  @input.capture="(item) => multipleSelection(item)"
>

Better to add a listener,

mounted() {
  this.$refs.combobox.$on('input', (items) => {
    const item = items[items.length -1];  // getting all selected, so take the last
    this.multipleSelection(item)
  })
},

Note, I tested this on a local project with Vuetify v1.5.14.

answered Feb 12, 2020 at 0:09

Richard Matsen

20.9k3 gold badges59 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tony19 · Accepted Answer · 2022-07-15 00:54:00Z

1

Looks like you need @keyup

<v-list-tile-content 
@keyup.enter.prevent="multipleSelection(item)" @click.stop.prevent="multipleSelection(item)">{{item.text}}
</v-list-tile-content>

Not sure about keypress....Vue docs show @keyup

https://v2.vuejs.org/v2/guide/events.html#Key-Modifiers

edited Jul 15, 2022 at 0:54

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Feb 11, 2020 at 21:17

ExcessJudgment

2281 silver badge9 bronze badges

Collectives™ on Stack Overflow

Execute method on enter key VueJS?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related