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方法