Document
placeholder="请选择文章标签" @change="changeValue($event)">
var vm = new Vue({
el: "#app",
data: {
options: [{
value: '{name:"HTML",value:"HTML"}',
label: 'HTML'
}, {
value: '{name:"CSS",value:"CSS"}',
label: 'CSS'
}, {
value: '{name:"JavaScript",value:"JavaScript"}',
label: 'JavaScript'
}],
value: []
},
methods:{
changeValue(e){
console.log(e)
}
}
})
可输入下拉框需要以下几个属性：
filterable：是否可搜索
allow-create：是否允许用户创建新条目，需配合 filterable 使用
default-first-option：在输入框按下回车，选择第一个匹配项。需配合 filterable 或 remote 使用
根据需求，提交的数据需要json格式{name:"HTML",value:"HTML"}，当输入Photoshop作为选项时，value默认为输入的值Photoshop，需要将其修改成json格式，可以在select的change事件修改。
还有一个问题是输入Photoshop后会发现下拉框多了一个选项，但label为undefined，如果此时选择了其他选项，再次打开下拉框时Photoshop就不存在了，因为并没有真实的将数据添加到options中
image.png
因此，需要在changeValue时给options添加新选项，并且将新选项的value改成json格式。
changeValue(e) {
console.log(e)
// 添加选项
if (e.indexOf("value") == -1) {
this.options.unshift({
label: e,
value: `{name:\"${e}\",value:\"${e}\"}`
});
// DOM中添加选项后，再改变v-model的值，一定要用 $nextTick
this.$nextTick(() => {
this.value = `{name:\"${e}\",value:\"${e}\"}`;
// this.$emit("input", this.value);
});
}
}
注意一定要在DOM中添加选项后再去选择输入的值，要使用$nextTick方法
