在Vue.js中按下Enter按钮时如何调用函数

Question

所以我在下面有一个ui-select选项代码，允许用户在下拉列表中搜索项目并且效果很好。但是在用户按下 ENTER 按钮的情况下，我的功能现在不会被执行。

<ui-select 
    v-model="groupName"
    has-search
    @keydown="createGroup($event)"
></ui-select>

示例输出如下：

在我的 METHODS 中，我有这个：

createGroup: function(evt){
    console.log(evt);
},

任何人都知道如何做到这一点？

Answer 1

正如我在问题评论中提到的那样，由于ui-select 停止事件冒泡选项 - Source，因此无法收听输入事件。 我可以建议重新考虑设计，如果你需要在用户选择ui-select选项时创建一些东西，你可以监听input事件并做一些额外的事情或事件阻止选择一些选项。 我认为这是更多（Vue-correct）数据驱动设计。

＆＃13;

＆＃13;

new Vue({
  el: "#app",
  data: {
  	colourStrings: ["Red","Blue", "Green"],
    select1: "",
    log: ""
  },
  methods: {
  	setValue(val) {
      // ui-select call setValue with our empty string when rendered
    	val && this.createGroup(val);
    	this.select1 = val;
    },
    createGroup(val) {
    	// some stuff
    	this.log += val + " created!\n"
    }
  }
})

＆＃13;

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/keen-ui@1.0.1/dist/keen-ui.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/keen-ui@1.0.1/dist/keen-ui.min.css" rel="stylesheet"/>
<div id="app">
  <ui-select
                label="Favourite colour"
                placeholder="Select a colour"
                :options="colourStrings"
                :value="select1"
                @input="setValue"
            ></ui-select>
            <pre>{{log}}</pre>
</div>

＆＃13;

＆＃13;

＆＃13;