时间戳

首页 > 解决方案 > 在 Vue.js 中按下 Enter 按钮时如何调用函数

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

问题描述

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

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

示例输出如下：

在此处输入图像描述

在我的方法中，我有这个：

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

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

标签： vue.js

解决方案

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

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"
    }
  }
})
<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>

推荐阅读