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

Question

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

因此，例如在上图中，“测试”一词显示在突出显示的字段中。到目前为止我所做的如下，但无法达到我的目标。

<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.
}

有什么办法可以做到吗？

标签： vue.jsui-select

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>