问题
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')})}}
问题解决。