问题
在VUE中使用ElementUI的el-select下拉框,它是通过接口异步获取的下拉框数据,选择某一个值后,虽然在绑定的 @change 事件中能够看到已赋值成功,控制台输出也显示赋值操作完成数据变化,但是框上却没有显示选中的值。
解决方案
VUE它是无法监听动态新增的属性的变化,但是有一个方法可以为动态属性赋值,那就是$set。
<template>
<el-select
v-model="value"
multiple
filterable
allow-create
default-first-option
placeholder="请选择文章标签">
@change="selectChange"
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
paper:[{
title:'',
author:''
}]
options: [{
value: '1',
label: 'HTML'
}, {
value: '2',
label: 'CSS'
}, {
value: '3',
label: 'JavaScript'
}],
value: []
}
},methods{
// 操作下拉框选中事件
selectChange(val) {
const title = this.options.find(item=>item.value===val).label
this.$set(this.paper, this.paper.title, title)
}
}
}
</script>