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中的同步操作和异步操作（setTimeout和promise）。

注意：使用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(); //调用组件的画图方法;
           }
          })         
        },          
    }

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