I am currently working on integrating the response data values with my multiselect options. Although the console log displays the returned results, I'm facing difficulty in connecting them to my multiselect options.
When I enter 'Day' into my multiselect, an autocomplete function triggers the axios call to fetch matching options, and the console shows:
0:
tag_id: "1001"
tag_data: "First Day"
1:
tag_id: "1002"
tag_data: "Second Day"
How can I incorporate these returned values into my options?
<div id="tagApp">
<multiselect
v-model="value"
:options="options"
:loading="loading"
:multiple="true"
:taggable="true"
@search-change="val => read(val)"
></multiselect>
</div>
new Vue({
components: {
Multiselect: window.VueMultiselect.default
},
el: "#tagApp",
data() {
return{
value: [],
loading: false,
options: []
}
},
methods: {
read: function(val){
//console.log('searched for', val);
if (val) {
this.loading = true;
this.options = [];
const self = this;
console.log(val);
axios.get('campaigns/search',{params: {query: val}})
.then(function (response) {
self.options = response.data;
console.log(response.data);
});
} else {
this.options = [];
}
}
}
})