鞍山网站建设工作室,北京中小企业网站建设,手动搭建wordpress环境,免费空间访问新增用户遇到的问题#xff1a; 如果你没有为 formData 设置默认值#xff0c;而只是将其初始化为空对象 {}#xff0c;则在打开dialog时#xff0c;正常输入#xff0c; formdata会变成如下 但是#xff0c;打开后#xff0c;直接使用 resetFields 或直接清空表单 如果你没有为 formData 设置默认值而只是将其初始化为空对象 {}则在打开dialog时正常输入 formdata会变成如下 但是打开后直接使用 resetFields 或直接清空表单 formdata会变成如下 Vue 使用 Object.defineProperty 实现响应式系统而这个方法只能劫持对象在初始化时存在的属性后添加的属性不会被自动追踪。 Vue 的响应式系统无法检测到新添加的属性从而导致输入框无法及时更新到 DOM 上。
当 formData 被清空时后添加的属性password、username不会被 Vue 的响应式系统自动追踪这会导致输入框无法及时挂载到 DOM 上。
解决方案
使用 Vue.set 方法确保在为对象添加新属性时使用 Vue.set以确保新属性是响应式的。
this.$set(this.formData, name, );初始化默认值在表单数据对象中预先设置好所有可能的字段避免在运行时动态添加属性。
formdata: {id: null,username: ,password: ,roleName:
},新问题修改用户
el-dialog :titleformdata.id?修改用户:添加用户 :visible.syncdialogFormVisible closeclosedialogdiv classupload-divel-form :modelformdata refformdata label-width80px status-iconel-form-item classformitem label用户名 propusernameel-input v-modelformdata.username/el-input/el-form-itemel-form-item classformitem label密码 proppasswordel-input v-modelformdata.password/el-input/el-form-itemel-form-itemel-button typeprimary clicksubmitForm提交/el-buttonel-button clickresetForm(formdata)重置/el-button/el-form-item/el-form/div
/el-dialog由于el-form组件进行了复用formdata的初始值如上在对el-table的某一行进行修改时
changeContent (row) {this.dialogFormVisible true;// row.password ;this.$nextTick(() {this.formdata JSON.parse(JSON.stringify(row));// this.$set(this.formdata, password, )})
},formdata重新赋值变成了 这就导致了在重置时由于formdata的初始值设置中是有password所以在重置后formdata的结构如下
在打开dialog直接点击重置后我们再往password的input中输入发现会无法输入这是因为此时password不具有响应式是新添加的属性。 如果打开dialog后正常操作则不会有上述问题。在输入password后password才会加入formdata并变成响应式。
解决办法 // 第一种方式row.password ;
this.$nextTick(() {this.formdata JSON.parse(JSON.stringify(row));console.log(formdata, this.formdata);// 第二种方式this.$set(this.formdata, password, )
})这两种方式都能将password变为响应式的。
重置是在重置前的formdata的基础上进行的重置前的formdata与初始化进行比较将初始化的属性和属性值赋值到现在的formdata中而方法不会赋值过来这也就是password为什么没有响应式的原因。 并且重置只会将在el-form中展示的属性进行重置对上面的el-form进行重置发现id和roleName并没有重置到初始状态这是因为这两个属性并没有设置prop和v-model绑定。
