Previously in Vue 2, I was able to retrieve a property from component children (rendered within a v-for loop) using this.$refs along with a dynamically-assigned :ref attribute.
However, this code no longer works in Vue 3. Upon logging out this.$refs, I noticed that the object is now empty.
My goal here is to access the 'isOrderable' property on all children components. The issue seems to be related to using :ref="product.id" where product.id is a variable. If I change it to ref="foobar", then I can at least get the last child component using this.$refs.foobar. But in Vue 2, I used to receive an array 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>
There seems to have been a change in Vue 3, but I cannot seem to find any relevant information on it. While there is plenty of documentation on this.$refs with the composition API, it doesn't address my specific issue.
Any assistance would be greatly appreciated.