我有一个主要工作的Vue多选,我通过axios调用数据库使用自动完成功能。就返回数据库结果并将它们添加为选项,然后标记,它完美地工作。
我的问题是我无法创建新标签。因此,如果我的axios调用返回“测试一个”作为选项,我选择它,它就成了一个标签。但是,如果我输入“new test”并按Enter键时没有返回任何结果,则它不会成为新标签。
我究竟做错了什么?
<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 = [];
}
}
}
})
我建议你阅读their documentation ...你需要的一切都在那里..你必须添加taggable
以及用@tag="handleTagMethod"
处理创作
CodePen镜像:https://codepen.io/oze4/pen/ROVqZK?editors=1010
Vue.component("multiselect", window.VueMultiselect.default);
new Vue({
el: "#app",
data: {
value: [],
options: []
},
methods: {
addTag(newTag) {
const tag = {
title: newTag,
// you'll need to add other items specific to your objects
};
this.options.push(tag);
this.value.push(tag);
}
},
mounted() {
var self = this;
axios
.get("https://jsonplaceholder.typicode.com/todos?_start=1&_end=10")
.then(response => {
self.options = response.data;
})
.catch(error => {
alert(error);
});
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-multiselect.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vue-multiselect.min.css">
<div id="app">
<div style="width: 600px">
<label class="typo__label">Simple select / dropdown</label>
<multiselect
v-model="value"
:height="300"
:options="options"
:multiple="true"
:taggable="true"
:close-on-select="false"
:clear-on-select="false"
:preserve-search="true"
tag-placeholder="Add this as new tag"
placeholder="Search or add a tag"
@tag="addTag"
label="title"
track-by="title"
:preselect-first="false"
>
<template slot="selection" slot-scope="{ values, search, isOpen }"><span class="multiselect__single" v-if="values.length && !isOpen">{{ values.length }} options selected</span></template>
</multiselect>
<pre class="language-json"><code>{{ value }}</code></pre>
</div>
</div>