vue的全局组件在父组件中的结果显示不稳定

Question

问题描述

从导航栏中第一次进入时页面可以正常显示，但从第二次起就无法正常显示

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
//这是展示的部分
<el-col :span="24"

        style="white-space: pre; color: #474747;font-size: 16px; font-weight: 400; margin-left: 20px;margin-top: 10px;margin-bottom: 10px"
        v-show="collapsed">
  <span style="color: #8b8b8b" :span="4" :id=name>已选条件：</span>

</el-col>

//使用了监听
props: ['filters', 'name'],

watch: {
  filters: {
    handler(newValue, oldValue) {
      console.log("进入监听+newValue===");
      console.log(newValue);
      this.valueToDiv();
    },
    deep: true
  },
  name(curVal,oldVal){
    console.log(curVal);
  }

},

// 方法
valueToDiv() {

    /*1.判断值是否为空
    2.获取到不为空的value值
    3.以'+'号拼接*/
    let titles = [];
    let values = [];
    for (let i = 0; i < this.filters.length; i++) {
      let label = this.filters[i].label;
      if (this.filters[i].value.length != 0 && this.filters[i].hidden !="true") {
        if (this.filters[i].type === 'select') {
          //所选的值
          let value = this.filters[i].value;
          for (let k = 0; k < this.filters[i].options.length; k++) {
            if (this.filters[i].options[k].value === value) {
              let a = this.filters[i].options[k].label;
              let b = label + ":" + a;
              titles.push(label);
              values.push(a);
            }
          }
        }
        else if (this.filters[i].type === 'regionTree') {
          //所选的值
          let value = this.filters[i].value;
          if (value.length == 1) {
            for (let m = 0; m < this.filters[i].options.length; m++) {
              if (this.filters[i].options[m].value == value) {
                let a = this.filters[i].options[m].label;
                let b = label + ":" + a;
                titles.push(label);
                values.push(a);
              }
            }
          } else if (value.length == 2) {
            let val = value[0];
            //第一个
            for (let m = 0; m < this.filters[i].options.length; m++) {
              if (this.filters[i].options[m].value == val) {
                let a = this.filters[i].options[m].label;
                let b = label + ":" + a + " / ";
                for (let k = 0; k < this.filters[i].options[m].children.length; k++) {
                  for (let n = 1; n < value.length; n++) {
                    if (this.filters[i].options[m].children[k].value == value[n]) {
                      a +=" / "+ this.filters[i].options[m].children[k].label;
                      b += this.filters[i].options[m].children[k].label;
                      titles.push(label);
                      values.push(a);
                    }
                  }
                }
              }
            }
          } else {
            let val = value[0];
            let val2 = value[1];
            let val3 = value[2];
            //第一个
            for (let m = 0; m < this.filters[i].options.length; m++) {
              if (this.filters[i].options[m].value == val) {
                let a = this.filters[i].options[m].label;
                let b = label + ":" + a + " / ";
                for (let k = 0; k < this.filters[i].options[m].children.length; k++) {
                  if (this.filters[i].options[m].children[k].value == val2) {
                    b += this.filters[i].options[m].children[k].label + " / ";
                    for (let n = 0; n < this.filters[i].options[m].children[k].children.length; n++) {
                      if (this.filters[i].options[m].children[k].children[n].value == val3) {
                        b += this.filters[i].options[m].children[k].children[n].label;
                        a +=" / "+ this.filters[i].options[m].children[k].label + " / "+this.filters[i].options[m].children[k].children[n].label;
                        titles.push(label);
                        values.push(a);
                      }
                    }
                  }
                }
              }
            }
          }
        }
        else if(this.filters[i].type === 'datetime'){
          let a = this.filters[i].label + ":";
          let b = this.filters[i].value;
          titles.push(this.filters[i].label);
          values.push(this.filters[i].value);}
        else {
          let a = this.filters[i].label + ":";
          let b = this.filters[i].value;
          titles.push(this.filters[i].label);
          values.push(this.filters[i].value);
        }

      }
    }

   let elementCol =document.getElementById(this.name);
    elementCol.textContent="已选条件：";

    for(let k = 0; k < values.length; k++){
      let link = document.createElement('span');
      link.textContent = titles[k] + ":";
      elementCol.appendChild(link);
      let link1 = document.createElement('span');
      link1.textContent = values[k] + "    ";
      link1.style.color = "#3a8ee6";
      link1.style.whiteSpace = "pre";
      elementCol.appendChild(link1);
    }
    console.log("elementCol.textContent ===>>"+elementCol.textContent);

  },
  

// 在mounted中调用

   mounted() {
  this.valueToDiv();
},

你期待的结果是什么？实际看到的错误信息又是什么？

正常结果

但第二次就出现问题

已选条件的时间没有了，但控制台显示是有的，页面上没出来

新人一枚，希望哪位大神指点一下。

Answer 1

 filters: {
    handler(newValue, oldValue) {
      console.log("进入监听+newValue===");
      console.log(newValue);
      this.$nextTick(() => {
          // 等 vue render 后再更改 dom.
          this.valueToDiv()
      });
    },
    deep: true
  },

PS: 你都使用 vue 了, 就贯彻以数据为主导的方式写 ui 吧, 别直接操作 dom 了.