Vue 3 Ref Array

Posted on  by admin

Using ref:

  • You block advertising 😢Would you like to buy me a ☕️ instead? If you’re used to working with Vue 2 $refs and switch to the Vue 3 Composition API, you might wonder how to use $refs inside the new setup() method.
  • In this article, we find out how to use the new ref() function as a replacement for static and dynamic HTML element references.
  • When using the Vue 3 Composition API via the setup() method, we don’t have access to this.$refs, rather, we can use the new ref() function for the same result.
  • You might wonder how this can work with dynamic references. Luckily after a short chat with Carlos Rodrigues, I knew the answer (the information is also in the official API documentation, but I somehow missed it).


Above you can see the example für dynamic Vue Composition API $refs from the official documentation.

  • Register for the Newsletter of my upcoming book: Advanced Vue.js Application Architecture. Although at first, I didn’t like the new $refs API very much, it gets the job done.
  • I think it’s only a matter of time until we get used to the new way of doing things with the Composition API.

Modified3 months ago. Please see below code.

  • And the output is below. expected output. I have to call item.value in the template to make it work.What's the work around for this scenario in vue3?

1. What is the problem when I use reactive() to deal with array?

2020 bronze badges. You are doing it wrong; try following. There is no point adding ref items to a normal array. The Array itself should be ref. 2020 bronze badges. 1,80211 gold badge88 silver badges2020 bronze badges. 88 silver badges2020 bronze badges. They should be accessed using value field :.

Wrapping it up

but this is a bad practice, your should define your array as ref then push values to it :. another crafted solution is to init the array with that values :.

1414 gold badges105105 silver badges129129 bronze badges. 129129 bronze badges. Recently, I am learning composition API by developing a simple todo list app.

Reactive :

I ran into some problems when dealing with array by using ref() and reactive() and found some behaviors which may be helpful for folks who are learning composition API too, so I wrote down some words here.

If there is something wrong, please tell me!

Static $refs first everything just work as I expected until I working on developing delete function.

I tried to build a button which will trigger the deleteHandler function when it been click. And the deleteHandler would filter out the element in todos:.

Here is my code:. However, I face a crucial problem, since the filter function would not mutate the original value but return a new value. Vue could not detect the change inside todos. To solve this problem, I rewrite my code.

Instead of assigning todos to reactice([]), I warpped the array with object like this -> reactive({todos:[]}). It seems that vue could only watch on the change with same reference(object in JavaScript is called by reference), but could not detect the change when the reference is changed.

As a resault, I think "wrap the array inside object" is a better way to deal with array in composition API.

According to the most information we could found, It seems that we can make a conclusion:.

ref() for primitive value and reactive() value. However, if we write some code like this, Vue is still able to detect the change inside it:. The reason is that when we pass data into ref(), it would first check whether the data been sended is primitive or object.

If it is object, ref() would call reactive() to deal with it.In other words, reactive() is the one who actually take on the job behind the scene.

At this stage, it seems that we can use ref() anytime.

However, I think it's better to use reactive() for object and ref() for primitive to make difference!(If you have any ideas about this topic, please share it to me !).

This is the correct answer.

This option is possible, but the first is much better. 11 gold badge55 silver badges2020 bronze badges.

2020 bronze badges.

Vue Template Refs give our Javascript code a reference to easily access the template.

For example, if we needed quick access to a component or HTML element, template refs is the perfect solution. In Vue 3, the Composition API gives us another way to use template refs.