Vue multiselect с аксиальным вызовом базы данных, laravel

По какой-то причине я не могу понять, как получить мультиселекторный стиль «автозаполнения» с правильной работой 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.info(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');

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

ebbishop 10.04.2019 14:39

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

Geoff_S 10.04.2019 14:42

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

Geoff_S 10.04.2019 15:44

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

ebbishop 10.04.2019 16:33

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

Geoff_S 10.04.2019 16:46

@ebbishop Я все еще немного не понимаю, куда указывать параметры данных.

Geoff_S 10.04.2019 17:29
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
6
1 395
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

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

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

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

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

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

@ТомН. Ага! Попробуйте.

ebbishop 10.04.2019 21:28

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

Geoff_S 10.04.2019 21:29

Другие вопросы по теме

Похожие вопросы

Доступ к элементам отображаемой HTML-страницы из Javascript, запущенного узлом
Запуск асинхронных команд на веб-странице с помощью node.js/electron/javascript
Есть ли способ получить из DOM разные значения параметра?
Momentjs: как преобразовать дату/время одного часового пояса в дату/время UTC
Обнаружение ошибки core.js: 15723 ERROR TypeError: невозможно прочитать свойство toLowerCase неопределенного значения в Angular 7
Как получить работающий таймер обратного отсчета с кнопкой, добавляющей +1 к счетчику после каждого нажатия
Функция vb.net JS, определенная в голове, не определена в onLoad
С# строка datetime utc и z при использовании в javascript
UnhandledPromiseRejectionWarning: отклонение необработанного обещания (идентификатор отклонения: 1): ReferenceError: RegistrationTokens не определен
Деструктуризация API https://randomuser.me/api/ для захвата заголовка, фамилии и имени, а также большой фотографии профиля пользователя, возвращаемого API