Utilizing a dynamic ref in Vue using the composition API

Question

Utilizing a dynamic ref in Vue using the composition API

While working with the composition API in Vue 3, I am trying to create a reference to a component dynamically. Typically, this would involve adding ref="name" to the template and then defining a ref using const name = ref(null). However, I am looking for a way to use dynamic ref names instead.

In the options API, a possible solution could be to use something like: :ref="name${x}" and then access it in the code as: this.$refs[name${x}]. Unfortunately, with the composition API, direct access to $refs is not available. Is there a way to achieve this without resorting to using a function inside the template ref?

javascript vue.js frontend vuejs3

Answer 1

Answer №1

The prop :ref can be utilized with a function as demonstrated in the guide, allowing you to assign it to your desired variable:

<script setup>
const customRef = ref(null);
</script>

<template>
  <Counter :ref="(el) => customRef = el" />
</template>

Example in Vue playground

Answer 2

The prop :ref can be utilized with a function as demonstrated in the guide, allowing you to assign it to your desired variable:

<script setup>
const customRef = ref(null);
</script>

<template>
  <Counter :ref="(el) => customRef = el" />
</template>

Example in Vue playground

Answer 3

Answer №2

It seems like using References inside v-for may be a better solution for your current goal.

Vue version 3.2.25 or higher is required

<script setup>
import { ref, onMounted } from 'vue'

const list = ref([1, 2, 3])

const itemRefs = ref([])

onMounted(() => {
  alert(itemRefs.value.map(i => i.textContent))
})
</script>

<template>
  <ul>
    <li v-for="item in list" ref="itemRefs">
      {{ item }}
    </li>
  </ul>
</template>

Vue SFC Playground

Answer 4

It seems like using References inside v-for may be a better solution for your current goal.

Vue version 3.2.25 or higher is required

<script setup>
import { ref, onMounted } from 'vue'

const list = ref([1, 2, 3])

const itemRefs = ref([])

onMounted(() => {
  alert(itemRefs.value.map(i => i.textContent))
})
</script>

<template>
  <ul>
    <li v-for="item in list" ref="itemRefs">
      {{ item }}
    </li>
  </ul>
</template>

Vue SFC Playground

Utilizing a dynamic ref in Vue using the composition API

Answer №1

Answer №2

Similar questions

Creating a method in Angular that combines async/await functionality with Observables

431 - (Excessive Request Header Size)

Creating an AJAX request in Knockout.js

What is the best way to access the value of an HTML tag in React?

Introducing a new feature in React-Select: enabling copy-paste functionality for the multi-select text

What could be the reason behind the disappearance of the lines in my table that was created with the help of HTML, CSS, and JavaScript?

Using jQuery to select a div element that has been dynamically loaded using ajax, or inserted into the DOM using the html()

Using Vue methods to access data variables for iterating through a loop

React JS does not allow TextField and Select to change

Utilize a line break within a MySQL UPDATE statement

Having trouble sending data from AJAX to PHP

Baffled by the data visualization produced by Google Chart using information from

Modify the contents of the 'data-content' area in the popover

The functionality of the button is affected when it is placed on the same line as a h1 heading

What are the mobile app frameworks that are compatible with Konva?

What is the purpose of the "Dot" symbol in the "runtimeArgs" property of the launch.json file in Visual Studio Code?

What could be causing the undefined properties of my input variables in Angular?

Nothing remains after the fall: coding void

"Exploring the power of JQuery in adding new elements and accessing the newly appended

Using a Javascript method to access a sibling property within an object