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>

发表评论

您的电子邮箱地址不会被公开。