是否在enter key VueJS上执行方法？

Question

我正在使用vuetify，并试图创建一个方法来添加下拉列表中的筹码。现在我已经写下了大部分逻辑，但正如您所看到的，multipleSelection方法不会在enter键上触发，但在onClick上工作得很好。这是一个codepen的演示。因此，应该在enter key上触发multipleSelection方法。

​

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/vuetify@1.5.14/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/vuetify@1.5.14/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>

​

任何帮助都将不胜感激。谢谢。

Answer 1

因为multipleSelection()不是从v-slot:item上的@keypress调用的，所以它很可能不是捕获事件的地方。

查看一下Vue Dev工具上的事件，可以看到input $emit by <VCombobox>是按Enter后的第一个事件。

所以下面的代码将会得到它，但是由于一些我不理解的原因，这似乎打乱了列表中的位置。

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

最好是添加一个监听器，

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

请注意，我使用Vuetify v1.5.14在一个本地项目上测试了这一点。

Answer 2

看起来你需要@keyup

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

不确定keypress....Vue文档是否显示@keyup

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