vue中使用element ui 表单验证，选择框联动，清空后导致的验证失败的问题

最新推荐文章于 2024-04-29 02:48:18 发布

原创最新推荐文章于 2024-04-29 02:48:18 发布 · 1.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #前端

本文介绍了如何在Vue.js中处理线路名称改变后的操作，包括强制刷新、获取相关信息、删除并重新设置conductorId属性，并使用$nextTick确保验证延迟。

不能直接将绑定的字段置空

//线路名称选框的change事件
    changeLineName(val) {
      //强制刷新
      this.$forceUpdate();
      if (val) {
        this.getConductorInfo(val);
      }
      //删除第二个select绑定的属性
      delete this.formInfo.conductorId;
      //重新添加第二个select绑定的空的属性
      this.$set(this.formInfo, "conductorId", "");
      //延迟验证，否则第一个刚改，第二个清空后直接进行验证提示
      this.$nextTick(() => {
        this.$refs["formInfo"].clearValidate("conductorId");
      });
    },