Как отобразить элемент поиска в меню ui-select в Vue

Question

Есть ли способ показать мой элемент поиска на ui-select меню в vue? Как, например, если пользователь ввел в поле поиска, и, например, как в случае события размытия или во время ввода, он будет отображать элемент в 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.
}

Есть ли способ, которым я могу это сделать?

Answer 1

Поэтому я заставил его работать, используя последние CDN keen-ui и Vue.

Вот ручка: 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>