javascript - 如何使用ref获取所有列表项？

Question

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

我也知道 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> 。如果你输入 ref在重复使用 v-for 的元素上，那么它将是一个项目数组。

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

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