По какой-то причине я не могу понять, как получить мультиселекторный стиль «автозаполнения» с правильной работой 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 && !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');
Что вы имеете в виду, что касается вашего второго комментария?
@ebbishop, что мне делать с возвращенными данными? Думаю, именно здесь я сейчас больше всего застрял. При загрузке страницы загружается слишком много элементов, поэтому я действительно хотел попробовать вызов axios для автозаполнения.
Его необходимо отправить компоненту vue multiselect в качестве параметров, чтобы компонент мог отображать данные. Похоже, вы намереваетесь использовать свойство данных vue options
для заполнения множественного выбора — когда у вас есть данные, возвращаемые с вашего маршрута, вы можете сделать что-то вроде this.options = data
. Мне непонятно, почему вы используете контроллер для обработки данных в разметке и что вы ожидаете от этой разметки.
Правда, у контроллера есть остатки форматирования, которые я оставил для проверки, но я понимаю, что вы имеете в виду. Я мог бы удалить форматирование и просто вернуть результаты как объект json, я думаю
@ebbishop Я все еще немного не понимаю, куда указывать параметры данных.
Я полагаю, что в вашем примере не хватает нескольких вещей.
Вам нужно активировать функцию read
при изменении ввода поиска - используйте для этого событие @search-change
Вам нужно использовать результаты вашего запроса axios, отправив их в this.options
, чтобы компонент multiselect
мог их использовать.
В этот пример я смоделировал запрос данных, используя тайм-аут, но вы должны понять идею. Вы также можете использовать свойство loading
, чтобы ваши пользователи знали, что что-то происходит за кулисами.
хорошо, я думаю, теперь я вижу, спасибо! Таким образом, мой вызов axios на самом деле был бы там, где находится ваша функция тайм-аута, и я мог бы просто установить this.options = data там
axios.get('campaigns/search') .then(response => this.options = response.data) .catch(error => {});
что-то вроде этого?
@ТомН. Ага! Попробуйте.
Я на самом деле изменил это так, чтобы он отправлял нужный мне «запрос» в контроллер: axios.get('campaigns/search',{params: {query: this.val}}) .then(function (response) { self.options = response.data; });
Но все равно никаких результатов. Однако я вижу ответ в своей консоли с json всех моих данных.
Не похоже, что вы просите vue что-либо сделать с данными, возвращенными из запроса axios. Я также подозреваю, что вам будет легче, если вы просто вернете данные из своего маршрута, а затем позволите vue создать разметку.