Search⌘ K
AI Features
Home
Courses
Vue - The Road to Enterprise

Array Refs

Explore how to handle array refs in Vue 3 during migration from Vue 2. Understand the manual process of managing refs in lists with Options and Composition API, and learn how lifecycle hooks support resetting refs for accurate component updates.

We'll cover the following...

Vue 2

In Vue 2, if we used a ref attribute with the v-for directive, the $refs property would be populated with an array of refs.

Let’s run the following code and look at the array refs example in Vue 2:

Note: The code below may take a while to run. When the server starts, go to the app URL to see the output.

import "./examples/array-refs/array-refs";
Array refs example in Vue 2
  • In the array-refs.js file, a new Vue app is created that renders the ArrayRefsExample component.
  • The ArrayRefsExample component renders a list of fruits. Each fruit, li, element has a fruitsRef ref. In Vue 2, if a ref is added to items in a loop, Vue automatically populates an array of refs.
  • The value of the fruitsRef
...