Vue中如何在ui-select菜单中显示搜索项

Question

有什么方法可以将我的搜索项显示到 vue 中的 ui-select 菜单中？例如，如果用户在搜索字段中输入，例如在模糊事件中或在输入时，它会将项目显示到 ui-select 菜单：

因此，例如在上图中，单词 "testings" 显示在突出显示的字段中。我目前所做的如下，但无法达到我的目标。

<ui-select 
    v-model="groupName"
    has-search
    @blur="hello"
    @query-change="checkEvent"
></ui-select>

方法：

checkEvent(val) {
    this.groupName = val;
 //but this one is not displayed in my field, like it's remain on the search field.
}

有什么办法可以做到吗？

Answer 1

所以我使用 keen-ui 和 Vue 的最新 CDN 使它工作。

这是笔：https://codepen.io/anon/pen/rKLjbr

<div id="app">
    <ui-select 
    has-search
    label="Favourite colours"
    placeholder="Select some colours"
    v-model="item"
    :options="colours"
    @query-change="checkEvent"
    ></ui-select>
</div>

<script>
new Vue({
    el: '#app',
    data() {
        return {
            item: '',
            colours: ['red', 'violet']
        }
    },
    methods: {
        checkEvent (val) {
            console.log(val)
            this.item = val // this will automatically update and be outputted in the highlighted field in your screenshot.
        }
    }
});
</script>

Vue中如何在ui-select菜单中显示搜索项

How to display the search item in the ui-select menu in Vue

vue.js

ui-select