Accessing array of components via $refs?

I’ve been learning Vue for a couple of months now. I am finally a bit stuck. I have the following code:

<div class="service-item" v-for="(serviceItem, sindex) in services" v-if="isMatch(serviceItem.type, type.name)" :class="{ 'service-item-invalid': serviceItem.error === true }">
    <service-item :serviceItem="serviceItem" :days="days" v-on:serviceItemClicked="onServiceItemClicked(sindex)"></service-item>
    <p v-if="serviceItem.errorMessage.length > 0" class="service-item-error">* {{ serviceItem.errorMessage }}</p>
</div>

As you can see, the code loops through services to create the service-item component.

What’s the best way to access each of these iterative components in order to call a function? If it was just a single component, I would set ref="serviceItem" and then access it via this.$refs.serviceItem.myFunc()

Looking forward to being unstuck. :slight_smile:

Have you tried setting ref on component in the loop based on unique index and calling function based on that index?

How would you go about that exactly?

:ref="'serviceItem['+sindex+']'" ??

If so, then how would you access this?

You should be able to access a list of all child components with this.$children: