[英]Axios call on select/enter with Vue Multiselect
我有一个正常运行的 Vue Multiselect,我在其中使用 axios 调用来填充数据库值中的选项。 这非常有效,允许我从现有选项中进行选择或输入新选项以创建标签。
实际上,这非常有效。 但是我需要一种方法,如果可能的话,在每次用户选择和选项或按下回车键以保存标签选项时进行另一个 Axios 调用。 有没有办法做到这一点?
这是我第一次使用 Vue,我真的不确定这有多可行,但基本上我只是想知道每次选择或使用回车键输入标签时如何进行 axios 调用
<div id="tagApp">
<multiselect
label="tag_data"
track-by="campaign_tag_id"
v-model="value"
:options="options"
:multiple="true"
:taggable="true"
@tag="addTag"
@search-change="val => read(val)"
:preselect-first="false"
:close-on-select="false"
:clear-on-select="true"
:preserve-search="true"
tag-placeholder="Add this as new tag"
placeholder="Search or add a tag"
></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 = [];
}
},
addTag(newTag) {
const tag = {
tag_data: newTag,
};
this.options.push(tag);
this.value.push(tag);
}
}
})
监视 @select 事件并触发将发生 Axios 调用的函数。
<div id="tagApp">
<multiselect
...
@select= "callAxios"
...
></multiselect>
</div>
...
methods: {
callAxios: function(val){
//your Axios call here
},
...
}
...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.