Vue Multiselect с Axios вызов к базе данных, Laravel - PullRequest
Новая
       11

Vue Multiselect с Axios вызов к базе данных, Laravel

2 голосов
/ 10 апреля 2019

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

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

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

Маршрут: 

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; !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 Ответ

1 голос
/ 10 апреля 2019

Мне кажется, в вашем примере не хватает нескольких вещей.

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

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

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

...