Having a functional Vue multiselect feature that utilizes an autocomplete function via an axios call to a database. The process of retrieving DB results, adding them as options, and turning them into tags works seamlessly.
The main issue arises when trying to create new tags. For instance, if the axios call returns "Testing one" as an option and it's selected, it becomes a tag. However, if no results are returned for something like "new test" and enter is pressed, it fails to become a new tag.
What could be causing this problem?
<div id="tagApp">
<multiselect
label="tag_data"
track-by="campaign_tag_id"
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 = [];
}
}
}
})