Vue2响应式丢失

发表于： 分类于：
字数：428 阅读：≈ 1分钟 浏览： 评论：

在编辑弹窗中，新密码输入框无法实时更新，需要切换角色才能更新一个字符。

一、问题描述：

在这个编辑弹窗中，角色可以正常选择，新密码的输入框没禁用，但是输入框的输入不更新，每次都需要切换一下角色新密码的输入框才能更新一个字符。

编辑框

  • 列表页如下：

列表页

  • 编辑按钮：
<el-button size="small" type="text" class="el-icon-edit" 
           @click="handleEditDialog(scope.$index,scope.row)">		
	{{$t('user.edit')}}
</el-button>
  • 数据
editForm: {
          username: '',
          password: '',
          roleId: '',
          userId: '',
          deleteStatus: ''
        }
  • handleEditDialog方法:
      handleEditDialog(row) {
        this.getRoleList(2);
        this.editForm = Object.assign({}, row);
        this.editForm.password = '';
        this.editDialog = true;
      }

一、问题解决：

问题就出在了**this.editForm = Object.assign({}, row); this.editForm.password = ‘’;**这两行，直接将row中的属性值拷贝到了editForm，但是row中并没有editForm.password属性，下面一行又手动将this.editForm.password设置为空字符串，Vue 无法检测到这个新属性的添加，导致该属性不是响应式的。从控制台来看更明显：password直接显示出来了，说明没有对应的getter、setter方法。

输出editForm

  • 解决方法也很简单：使用 $set 确保 password 属性是响应式的
	handleEditDialog(row) {
        this.getRoleList(2);
        this.editForm=Object.assign({},row);
        this.$set(this.editForm,'password','');
        this.editDialog=true;
    }