DayDayUp

「这是我参与2022首次更文挑战的第1天，活动详情查看：2022首次更文挑战」。

需求

1. 如图，选中下拉框中的‘C站’，将名称填入上级分组input框中
2. 并调用接口，获得单位级别的名称，自动更新到单位级别input框中

初始代码

  handleNodeClickForAdd(node) {//选中C站触发的方法
      debugger;
      this.newUnit.parentId = node.id;//获取选中的数据
      this.newUnit.parentIdName = node.label;
      getDeptLevel(node.id).then((response) => {//将选中的ID传递给接口，获取级别ID
        console.log(response);
        debugger;
        this.newUnit.deptLevel = Number(response.data.deptLevel) + 1;//这个主要用于rules，可忽略
        //因为是新建级别，肯定是当前级别的下一层，因此需要加一
        const requestDataLevelHand = {
          deptLevel: Number(response.data.deptLevel) + 1,
        };
        //将新建级别的id，传递给另一个接口，获取级别名称
        getUnitLevel(requestDataLevelHand).then((response) => {
            //将接口返回的级别名称填入data对象中
           this.newUnit.deptLevelName = response.data[0].deptLevelName;
        });
        debugger;
      });

现象

问题：视图没有实时更新，有一个延迟效果

解决（this.$set）

代码

      getUnitLevel(requestDataLevelHand).then((response) => {
          // this.newUnit.deptLevelName = response.data[0].deptLevelName;
          this.$set(
            this.newUnit,
            'deptLevelName',
            response.data[0].deptLevelName
          );
          console.log(this.newUnit.deptLevelName);
        });
        debugger;

效果

原因分析

• 我发现给对象加了一个属性，在控制台能打印出来，但是却没有更新到视图上时，也许这个时候就需要用到this.$set（）这个方法了
• 具体原理咱也不太懂，就从this.$set要实现什么功能说起吧
• 官方解释：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = 'hi')，

this.$set用法

实例：

   this.$set(
            this.newUnit,
            'deptLevelName',
            '我是值'
          );