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

Question

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

我也知道这样做的JS方法document.getElementById("listOfItems").getElementsByTagName("li"); 但是如上所述，我正在寻找像this.$refs的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>