vue下拉框值改变_element-ui可输入下拉框改变输入值对应的value

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