vue裏動態設置並獲取ref

今天來說一個一直以來老是被我忽略的知識點，關於vue裏的ref。需求是這樣的：

在頁面初次渲染的時候動態生成這樣一個餅圖列表，我用的是echarts，你們都知道echarts的每個chart都是要綁定到單獨的id裏去，那麼在vue裏，確定用的是ref。

在下愚鈍，以前總覺得ref必定要是惟一的，這也怪本身不多看文檔，因此想着怎麼樣給每個li都加上單獨的ref，天然而然的就想到了利用li的index：

<ul class="section__content">
    <li class="asset-pie-chart" v-for="(item,index) in deviationCharts" :key="index" :ref="deviationChart+'index'" ></li>
</ul>
複製代碼

而後在數組的循環裏動態獲取每個ref。

看上去彷佛沒毛病吧。

而後發現沒用，獲取不到ref元素。

調試後，發現兩個問題：

1. 第一，獲取ref必定要注意是在dom元素生成以後，不然獲取到的是undefined，或者報沒有「getAtrribute」方法的錯誤，解決辦法是使用$nextTick。
2. 不必給循環列表的每個元素加上不同的ref，而只用給他們都加上同樣的ref，根據此ref獲取到的是一個數組列表，而後根據index便可定位該元素，例子以下：

this.$nextTick(() => {
          console.log(this.$refs.deviationCharts);
            //deviationCharts爲統一ref
          let deviationChart = echarts.init(this.$refs.deviationCharts[index]);
          deviationChart.setOption(option);
          deviationChart.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: 0
          }); //設置默認選中高亮部分
        });

複製代碼