v-for循环下动态绑定ref后undefine的解决方式

一，实现效果

上面和下面是v-for渲染出来的，中间是写死ref渲染出来的：

二，原因分析

html的代码：

<!-- 头部区域的样式 -->
<!-- 头部区域的样式 -->
<div class="styleHeader">
  <div  v-for="(item,index) in topStyle" :key="index" :class="[styleClass(topStyle,item.content)]" v-show="item.checked=='1'" :ref="item.content" @click="select(topStyle,item.content)">{{printStyleObj[item.content]}}     			</div>
</div>

这个业务逻辑比较麻烦，可以只看v-for和：ref部分，
可以看到，我使用v-for的同时，动态绑定了ref。
这样一来，点击这一项的时候，打印一下：console.log(this.$refs[contentParams]);
得到的结果是：

就是一个数组，里面的第一项就存放着我们 要获取的对应dom元素。
但是我们常规使用这个ref时，都是这样：

console.log(this.$refs[contentParams].classList);

比如说我想查看这个dom元素的class列表，就通常是这样直接写的，于是就会报错：undefine。

原因就在于，v-for循环中动态绑定的ref，获取到的是个数组，这个数组又没有dom元素的相关属性，自然报错undefine。
而实际上，它把我们想要的dom元素放置在这个数组的第一项了！我们只要获取这个第一项就可以。
如：console.log(this.$refs[contentParams][0].classList);

就可以访问目标dom元素：

三，我的解决

因为我这个地方既有v-for绑定的，又有常规写死的，于是做个if判断就行：

let dom=null
if(contentParams=='dishes_format' || contentParams=='type_title'){
    dom=this.$refs[contentParams]
}else{
    dom=this.$refs[contentParams][0]
}

这个contentParams就是我这个函数中传入的ref绑定值，只有dishes_format和type_title是写死的，所以这样处理一下就可以了。