问题

dialog弹出框里的form表单，打开后给输入选项赋值，改选项无法再输入。问题代码：

     <el-form :model="form" ref="formRef" label-width="120px" size="small"><el-form-item label="业务方" prop="bizPartyCode"><el-input v-model="form.bizPartyCode"></el-input></el-form-item></el-form>

data() {return {formDialogVisible: false,form: {}}},methods: {/*** 新建&&修改*/showAdd() {this.formDialogVisible = truethis.$nextTick(()=>{this.form.bizPartyCode = 'value'})}}

原因分析

初始值form的属性没有定义，后续直接给form添加属性并赋值，vue没有监听到form值变化，输入选项就没有重新渲染，所以出现无法输入（实际已赋值）。

解决方法

方法一、在form初始值中定义好属性

data() {return {formDialogVisible: false,form: {bizPartyCode: ''}}},methods: {/*** 新建&&修改*/showAdd() {this.formDialogVisible = truethis.$nextTick(()=>{this.form.bizPartyCode = 'value'})}}

方法二：使用vue的$set()方法

vue官方文档：对于已经创建的实例，Vue 不允许动态添加根级别的响应式 property。但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式 property。

data() {return {formDialogVisible: false,form: {}}},methods: {/*** 新建&&修改*/showAdd() {this.formDialogVisible = truethis.$nextTick(()=>{this.$set(this.form, 'bizPartyCode', 'value')})}}

问题解决。