vue中v-for、ref、echarts画图的注意事项

效果需求:

        在vue项目中动态的给div赋予ref属性,根据选中的测点个数,动态显示echarts图谱个数

遇到的问题:

首先说一下最开始的实现思路:

        1.在项目挂载的时候调用接口获取数据。

        2.调用echarts画图方法。

1.逻辑清晰,实现也很简单:

<div v-for="(item, index) in arr" :key="index"> //循环arr数组长度来确定图谱个数
        <div   style="height: 100%; width: 100%">
          <div>故障统计分布图</div>
          <bargraph :ref="item.name"></bargraph> //这是个组件用来画图
        </div>
</div>

在挂载的时候调用方法获取接口数据并画图:

    mounted() {
      this.findall();  //获取接口数据;
      this.mypaints();  //此时已经获取到数据,调用画图方法;
 
    },
    methods: {
        findall() {
          this.$axios.get("/api2/mydataset/query").then(res => {
            if(res.data.code = 200) {
              this.arr= res.data.data;
            }
          })
        },

        mypaints() {
          for(let j in this.arr) {
            this.$refs.arr[j].setchart(); //调用组件的画图方法;
          }
        },          
    }

此时会发现页面没有成功显示图谱,或者有可能只显示一个图谱,此时控制台会报错。

2.这是因为vue生命周期的问题,我们在第一步接收到数据后,会更新arr数组的长度(个数)来更新渲染DOM内容,如果接下来立即执行echarts画图方法,会发现refs数组为空,因为DOM还未更新完成,就去使用refs,当然找不到对应的refs[j]了!

解决方法:

需要在DOM更新完毕后,再调用执行echarts画图方法。可以使用 this.$nextTick方法,该方法作用相当于延迟调用,即在DOM更新的时候不会立即执行里面的函数,在DOM更新完成后再去执行里面的函数,有点类似JS中的同步操作和异步操作(setTimeoutpromise)。

注意:使用v-for之后,ref相当于一个数组了,所以应该这样调用:this.$refs.arr[0]  或者 this.$refs[arr][0],此处的arr对应上面绑定的item.name,因为我将item.name都定义为了'arr'你也可以自己定义。

    mounted() {
      this.findall();  //获取接口数据;

    },
    methods: {
        findall() {
          this.$axios.get("/api2/mydataset/query").then(res => {
            if(res.data.code = 200) {
              this.arr= res.data.data;
            }
          })
          this.$nextTick(() => {
            this.mypaints();            
           }) //此时已经获取到数据,调用画图方法;
        },

        mypaints() {
        this.$nextTick(() => {
           for(let j in this.arr) {
            this.$refs.arr[j].setchart(); //调用组件的画图方法;
           }
          })         
        },          
    }

本人新手小白,欢迎沟通交流!!!欢迎批评指正!!!

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值