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

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

0 голосов
/ 06 июня 2018

Можно ли как-нибудь отобразить свой элемент поиска в меню ui-select в vue?Как, например, если пользователь ввел в поле поиска, и, например, как в случае события размытия или во время ввода, он отобразит элемент в меню ui-select:

enter image description here

Так, например, на рисунке выше, слово «тестирование» отображается в выделенном поле.То, что я сделал до сих пор, ниже, но не может достичь моей цели. 

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

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

1 Ответ

0 голосов
/ 06 июня 2018

Итак, я заставил его работать, используя последние 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>
...