el-input新增后无法编辑的问题

需求：新增编辑共用一个弹框

问题：新增成功后无法编辑，页面刷新后可以编辑。

 解决：

因为el-form是嵌在el-dialog里的，所以一开始以为是获取不到输入的值，做了如下处理

<el-form
          :model="dialog"
          :rules="rules"
          ref="dialog"
          @input="change($event)"
        >

// 解决弹窗input框不能输入的问题（已解决，this.edit用$set做了处理）
     change() {
       this.$forceUpdate();
     },

其实就是强行刷新视图，后来发现这样处理还是会有bug，然后重新思考改了这个问题，下面这个方法是没毛病的，参照了这个大哥的博客：大哥博客

//渲染列表数据
      //Case:由此Vue实例创建时，dialog的属性名并未声明，因此Vue就无法对属性执行 getter/setter 转化过程，导致dialog属性不是响应式的，因此无法触发视图更新
      this.$set(this.dialog, "identify", row.identify);
      this.$set(this.dialog, "name", row.name);
      this.$set(this.dialog, "description", row.description);
      this.$set(this.dialog, "type", row.type);
      this.$set(this.dialog, "unit", row.unit);
      //expandInfoVo
      this.$set(this.dialog, "rangeSupper", row.expandInfoVo.rangeSupper);
      this.$set(this.dialog, "rangeLower", row.expandInfoVo.rangeLower);
      this.$set(this.dialog, "blindSpot", row.expandInfoVo.blindSpot);
      this.$set(this.dialog, "driftZero", row.expandInfoVo.driftZero);
      this.$set(this.dialog, "radix", row.expandInfoVo.radix);
      this.$set(this.dialog, "multiple", row.expandInfoVo.multiple);
      //channelInfoVo
      this.$set(this.dialog, "channelName", row.channelInfoVo.name);
      this.$set(this.dialog, "ipv4", row.channelInfoVo.ipv4);
      this.$set(this.dialog, "port", row.channelInfoVo.port);
      //protocolInfoVo
      this.$set(this.dialog, "commonAddress", row.protocolInfoVo.commonAddress);
      this.$set(this.dialog, "objectAddress", row.protocolInfoVo.objectAddress);

      //渲染列表数据
      // this.dialog.identify = row.identify;
      // this.dialog.name = row.name;
      // this.dialog.description = row.description;
      // this.dialog.type = row.type;
      // this.dialog.unit = row.unit;
      // //expandInfoVo
      // this.dialog.rangeSupper = row.expandInfoVo.rangeSupper;
      // this.dialog.rangeLower = row.expandInfoVo.rangeLower;
      // this.dialog.blindSpot = row.expandInfoVo.blindSpot;
      // this.dialog.driftZero = row.expandInfoVo.driftZero;
      // this.dialog.radix = row.expandInfoVo.radix;
      // this.dialog.multiple = row.expandInfoVo.multiple;
      // //channelInfoVo
      // this.dialog.channelName = row.channelInfoVo.name;
      // this.dialog.ipv4 = row.channelInfoVo.ipv4;
      // this.dialog.port = row.channelInfoVo.port;
      // //protocolInfoVo
      // this.dialog.commonAddress = row.protocolInfoVo.commonAddress;
      // this.dialog.objectAddress = row.protocolInfoVo.objectAddress;

主要原因：

地址没有改变，vue就监测不到数据变化。这个时候，双向绑定就失效了。

所以说表单不是响应的，就无法触发视图更新。

$set用法