在做项目的时候遇到一个问题,下拉框选中后,显示框没有发生改变,于是在网上找了很多方法,我觉得下面这个方法最方便。
首先是监听选择框值改变,在改变时通过$set直接赋值
<el-form-item label="所属城市:" prop="city">
<el-select
v-model="addForm.city"
placeholder="请选择城市"
size="small"
@change="selectCity"
>
<el-option v-for="item in cities" :key="item.id" :value="item.id" :label="item.name" />
</el-select>
</el-form-item>
selectCity(val) {
if (val) {
this.$set(this.addForm, this.addForm.city, val)
} else {
this.$set(this.addForm, this.addForm.city, '')
}
},
这里顺便讲一下$set的用法
$set 用来更新数组或对象
$set(参数1, 参数2, 参数3)
参数1:需要更新的数组或对象
参数2:数组的下标或者对象的属性名
参数3:更新的内容
var object = {
id: '1',
name: 'Mary',
sex: '女',
}
this.$set(object, 'name', 'Lily')