Повторно не выбирается значение в пакете vue-select?

Question

[edleman]

В Laravel получаю данные с помощью модели.

public function onSearch(Request $request){
    $search = Model::where('text', 'LIKE', '%'.$request->search.'%')->get();

    return response()->json(['search' => $search]);
}

В компоненте VUE делаю следующее:

<template>
                <v-select
                          :v-model="option"
                          :filterable="false"
                          :options="options"
                          @search="onSearch">
                    <template slot="no-options">
                        search
                    </template>
                    <template slot="option" slot-scope="option">
                        <div class="d-center">
                            {{ option.short_name }}
                        </div>
                    </template>
                    <template slot="selected-option" slot-scope="option">
                        <div class="selected d-center">
                            {{ option.short_name }}
                        </div>
                    </template>
                </v-select>
 </template>

<script>
    import axios from 'axios'
    import _ from 'lodash'
    export default {
        data() {
            return {
               option: null,
               options: [],
           }
         },
       methods: {
            onSearch(search, loading) {
                loading(true);
                this.search(loading, search, this);
            },
            search: _.debounce((loading, search, vm) => {
                let formData = new FormData();
                formData.append('search', search);
                axios.post('/search', formData).then(response => {
                   vm.options = response.data.search;
                    loading(false);
                });
            }, 350)
        }
    }
</script>

При запуске кода в селекте данные находятся и выводятся в селект, но если например решил изменить выбранный селект, то поиск новых данных срабатывает, но при выборе, повторно они не выбираются. Если нажать крестик справа и занового выборку сделать, то тогда срабатывает.

Сама документация: https://vue-select.org/guide/ajax.html#loading-opt...
Есть также на сайте с документацией пример: https://codepen.io/sagalbot/pen/POMeOX
Пробовал этот пример сделать, работает нормально ни каких нареканий.
Собственно повторно не выбирается значение, что сделал не так? Подскажите пожалуйста. Спасибо.

Answer 1

[Олег Колтунов]

Уберите :v-model из v-select.

Comments

[edleman]

не помогло, и как я тогда буду получать данные выбранного селекта без v-model?

[Олег Колтунов]

Попробовал на их примере, работает и так и так.
1. @input="setSelected" (навешиваете функцию, в ней уже получаете значение и делаете с ним что хотите)
2. v-model="option" (v-model без двоеточия)

[edleman]

Что то делаю не так, попробовал на гитхаб репозиторий результат тот же. При первом выборе выбирается, при втором выборе не выбирается из списка. Кликаю выбрать, а значение не меняется. Только после нажатия крестика.

axios.get('https://api.github.com/search/repositories?q=${escape(search)}')
                    .then(response => {
                    vm.options = response.data.items;
                    loading(false);
                })

[edleman]

Олег Колтунов, создал полностью отдельно ларавельский тестовый проект, выше код работает отлично, делаю тоже самое в своем проекте не работает
Позже сам попробую еще потестить разными способами.

[edleman]

Олег Колтунов, в общем интересная вещь происходит до этого в модели я использовал select, т.е. вот так

$search = Model::select(['id', 'short_name'])->where('text', 'LIKE', '%'.$request->search.'%')->get();

Если он вставлен, то тогда повторный выбор не срабатывает, если же его убрать, то все нормально работает. Почему так, так и не понял. Видимо есть в этом отличия.

Answer 2

[genius_spirit]

v-model не может баиндится как у вас (:v-model="option") он всегда v-model="option"

Comments

[edleman]

просто допустил опечатку