el-select 选择后,显示框中的文字不发生变化
产生原因:一般情况下是绑定的属性,是动态向对象中添加的,Vue无法监听新增的属性变化,导致无法触发视图的改变。
如果是此原因,需要通过 Vue.set()
来新增属性:
Vue.set(this.form, 'key', 'value');
或者通过 $forceUpdate
来强制视图重新渲染:
需要在 el-select
的 @change
事件中调用 vue
的 $forceUpdate()
强制重新渲染:
<el-select class="is_editing" v-model="form.project_id" filterable placeholder="请选择" @change="changeSelectedProject" style="width: 100%;">
<el-option
v-for="item in projects"
:key="item.id"
:label="projectNameFormatter(item)"
:value="item.id">
</el-option>
</el-select>
changeSelectedProject(val) {
this.$forceUpdate();
}
其他标签也会遇到同样的问题:
el-input
:
<el-input type="text" v-model="form.name" @input="$forceUpdate()" autocomplete="off"></el-input>
el-radio
:
<el-radio-group v-model="form.pay_type" @change="$forceUpdate()">
<el-radio :label="1">支付宝</el-radio>
<el-radio :label="2">微信</el-radio>
</el-radio-group>