Блог

Главная - Вопросы по программированию - Vue multiselect с вызовом axios к базе данных, laravel

Vue multiselect с вызовом axios к базе данных, laravel

#javascript #jquery #laravel #vue.js #multi-select

#javascript #jquery #laravel #vue.js #множественный выбор

Вопрос:

По какой-то причине я не могу понять, как заставить multiselect в стиле автозаполнения работать должным образом с Vue.

Я правильно установил маршрут, который вызывается в моем блоке axios, и контроллер настроен на использование запроса как способа обращения к базе данных с предложением LIKE, но где-то что-то идет не так, и мой multiselect не заполняется результатами из базы данных, которые сделали бы его доступным для поиска.

Что я здесь делаю не так?

Маршрут:

 Route::get('search', 'Controller@searchTags')
    ->name('search');

Контроллер:

 public function searchTags(Request $request)
{
    if ($request->get('query')) {
        $query = $request->get('query');
        $data = TAGS::where('TAG_DATA', 'LIKE', "%{$query}%")->get();

        $output = '<ul class="dropdown-menu" style="display:block; position:relative">';
        foreach ($data as $row) {
            $output .= '<li><a href="#">' . $row->tag_data . '</a></li>';
        }
        $output .= '</ul>';

        return $output;
    }
}

Блейд:

 <div id="tagContent">
    <multiselect v-model="value" open-direction="bottom" :options="options" :multiple="true" :close-on-select="false" :taggable="true" :clear-on-select="false" :preserve-search="true" placeholder="Add Tag(s)" label="name" track-by="name">
        <template slot="selection" slot-scope="{ values, search, isOpen }"><span class="multiselect__single" v-if="values.length amp;amp;amp;amp; !isOpen">{{ values.length }} options selected</span></template>
    </multiselect>
</div>

new Vue({
        components: {
            Multiselect: window.VueMultiselect.default
        },
        data () {
            return {
                value: [],
                options: []
            }
        },
        methods: {
            read(){
                window.axios.get('campaigns/search').then(({ data }) =>{
                    console.log(data)
                });
            },
            addTag (newTag) {
              const tag = {
                name: newTag,
                code: newTag.substring(0, 2)   Math.floor((Math.random() * 10000000))
              }
              this.options.push(tag)
              this.value.push(tag)
            }
        }
    }).$mount('#tagContent');

Комментарии:

1. Не похоже, что вы просите vue что-либо делать с данными, возвращенными из запроса axios. Я также подозреваю, что вам будет проще, если вы просто вернете данные из своего маршрута, а затем позволите vue обрабатывать создание разметки.

2. Что вы имеете в виду, что касается вашего 2-го комментария?

3. @ebbishop что я должен делать именно для возвращаемых данных? Я думаю, что сейчас я в основном застрял. Слишком много элементов для загрузки при загрузке страницы, поэтому я действительно хотел попробовать вызов axios для автозаполнения

4. Его необходимо отправить компоненту vue multiselect в качестве опций, чтобы компонент мог отображать данные. Похоже, вы намереваетесь использовать свойство vue data options для заполнения multiselect — когда у вас есть данные, возвращенные с вашего маршрута, вы могли бы сделать что-то вроде this.options = data . Мне непонятно, почему вы используете контроллер для обработки данных в разметку и что вы ожидаете, что произойдет с этой разметкой.

5. Правда, в контроллере осталось некоторое форматирование, которое я сохранил для тестирования, но я понимаю, что вы имеете в виду. Я мог бы удалить форматирование и просто вернуть результаты в виде объекта json, я думаю

Ответ №1:

Я полагаю, в вашем примере не хватает нескольких вещей.

  1. Вам нужно запускать read функцию при изменении ввода поиска — используйте @search-change событие для этого

  2. Вам нужно использовать результаты вашего запроса axios, отправив их this.options , чтобы multiselect компонент мог их использовать.

В этом примере я издевался над запросом данных, используя тайм-аут, но вы должны понять идею. Вы также можете использовать loading свойство, чтобы ваши пользователи знали, что что-то происходит за кулисами.

Комментарии:

1. хорошо, я думаю, что теперь понимаю, спасибо! Таким образом, мой вызов axios на самом деле будет там, где находится ваша функция тайм-аута, и я мог бы просто установить это.параметры = данные там

2. axios.get('campaigns/search') .then(response => this.options = response.data) .catch(error => {}); что-то вроде этого?

3. @TomN. Да! Попробуйте это сделать.

4. Я на самом деле изменил его, сделав это так, чтобы он отправлял «запрос», который мне нужен в контроллере: axios.get('campaigns/search',{params: {query: this.val}}) .then(function (response) { self.options = response.data; }); Но по-прежнему никаких результатов. Тем не менее, я вижу ответ в своей консоли с json всех моих данных