this.$refs 为空，带有 Vue 3 选项 API

Question

In Vue 2 I used to be able to access a property on component children (rendered inside a v-for loop using this.$refs and a dynamically-assigned:ref).

The same code in Vue 3 fails, and when I log out this.$refs the object is empty.

Here I'm wanting to access an ' isOrderable ' property on all children. The problem appears to be with :ref="product.id" being a variable. If I change it to ref="foobar" then I do get the last child in this.$refs.foobar . But it vue2 me an array back containing all children components.

  <script>
  import productItem from "./Product.vue";
  export default {
    props: ["products"],
    components: {
      'product-item': productItem
    }
    methods: {
      addAllProducts() {
        const orderable = this.products.filter((p) => this.$refs[p.id][0].isOrderable);
        ...
      }
    }
  }
  </script>

  <template>
    <form>
      <div v-for="product in products" :key="product.id">
        <product-item :product="product" :ref="product.id" />
      </div>
      <button @click="addAllProducts">Add All</button>
    </form>
  </template>

Obviously something changed in vue3 but I can't find any info about it. There's plenty of info on this.$refs , and but it all has to do with accessing refs from the composition API.

Any help appreciated.

Answer 1

In vue 3 they change how refs work with arrays, now you need to pass a function and have a state on your data to keep track of your refs https://v3.vuejs.org/guide/migration/array-refs.html#frontmatter-title .

I don't know how your code is structured but maybe there is a better solution to your problem than using refs, if the logic that toggles if a product-item is orderable lives inside the product-item component you can have an event that emits when the orderable value is changed an update an array of orderableProducts with the id of each product, you can even use that in a v-model with the multiple v-models options of vue3. in that way you don't need to hold a reference of the dom just to filter by the ones that are orderable.

Answer 2

Refs in Composition API (super-simple example)

setup() {
    const {ref} = Vue
    const abc = ref(null)

    function doSomething() {
        abc.value.focus()
    }

    return {abc}
},

template: `
    <component ref="abc" />
`

Still, if you want to access ref element with function outside setup(), for example from router guard beforeRouteLeave function, then you use:

this.$refs.abc... (without value)