如何使用 ref 获取所有列表项?

Question

我知道如何通过执行this.$refs.listOfItems来获取父ul，但不确定如何获取列表中的所有liul。

我也知道 JS 的做法document.getElementById("listOfItems").getElementsByTagName("li");但如上所述，我正在寻找 Vue 提供的帮助者.js例如this.$refs

<template>
<ul id="listOfItems" ref="listOfItems">
<li v-for="item in items">{{ item.name }}</li>
</ul>
</template>
<script>
export default {
mounted: {
let ul = this.$refs.listOfItems
let lis =  // HOW TO GET ALL LIs using `this.$refs.listOfItems`
}
}
</script>

Answer 1

我想你的意思是把v-for放在<li>而不是<ul>上。如果在与v-for重复的元素上放置一个ref，那么它将是一个项目的数组。

<ul>
<li v-for="item in items" ref="items">{{ item.name }}</li>
</ul>

this.$refs.items[0];  // The first <li>