今天来讲一个一直以来总是被我忽略的知识点,关于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元素。
调试后,发现两个问题:
- 第一,获取ref一定要注意是在dom元素生成之后,否则获取到的是undefined,或者报没有“getAtrribute”方法的错误,解决办法是使用
$nextTick
。 - 没必要给循环列表的每一个元素加上不一样的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
}); //设置默认选中高亮部分
});
复制代码
所有评论(0)