v-for与ref在html模板上遇到的ts声明的问题

问题

  <div v-for="(item,index) in titles" 
  :key="index" 
  :ref="el=>{ if(item===selected){element=el}} " 
  @click="toggle(item)">{{item}}</div>

用ref 引用html标签时这么写会在buile时报错

src/lib/Tabs.vue:5:90 - error TS2322: Type 'Element | ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBas
e<any, any, any, any, any, any, any, any, any, {}>> | null' is not assignable to type 'HTMLDivElement | undefined'.

Type 'null' is not assignable to type 'HTMLDivElement | undefined'.

5         <div v-for="(item,index) in titles" :key="index" :ref="el=>{ if(item===selected){element=el}} " @click="toggle(item)">{{item}}
</div>

编辑器也会提示有问题

官方写法也会报错如下：

<div v-for="item in list" :ref="setItemRef"></div>
export default {
  setup() {
    let itemRefs = []
    const setItemRef = el => {
      if (el) {
        itemRefs.push(el)
      }
    }
    return {
      setItemRef
    }
  }
}

这样写编译时报错

解决方法

不知是不是ts与vue兼容性的问题还是怎么回事
这样写编译时不能通过那么就采用最古老的方法操作dom元素
找到这个元素的父元素然后在挂在的时候获取父元素的所有子元素就可以得到你要想的所有元素的引用