element-ui input 输入框赋值后，无法再输入的问题解决

问题

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 = true
      this.$nextTick(()=>{
        this.form.bizPartyCode = 'value'
      })
    }
  }

原因分析

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

解决方法

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

data() {
    return {
        formDialogVisible: false,
	    form: {
            bizPartyCode: ''
        }
    }
  },
  methods: {
    /**
     * 新建&&修改
     */
    showAdd() {
      this.formDialogVisible = true
      this.$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 = true
      this.$nextTick(()=>{
        this.$set(this.form, 'bizPartyCode', 'value')
      })
    }
  }

问题解决。