dom的for代码如下:
<li class="shrink-0 px-1.5 py-0.5 z-10 duration-200 last:pr-5"
v-for="(item, index) in $store.getters.categorys"
:class="{ 'text-zinc-100': $store.getters.currentCategoryIndex === index }"
:key="item.id"
:ref="(el) => setItemRef(el, index)" @click="onItemClick(item)">
{{ item.name }}
</li>
先上错误的代码:
let itemRefs = []
const setItemRef = (el, index) => {
if (el) {
itemRefs.push(el)
}
}
修改之后的代码:
let itemRefs = []
const setItemRef = (el, index) => {
if (el) {
itemRefs[index] = (el)
}
}
问题解析: vue3 => 使用v-for 循环时, 使用ref总会获取到的是最后的元素, 必须使用函数, 手动赋值, 不能用push, 会在更新的时候造成bug, 元素会重复