How can I push to an array (in Vue 3)?

Question

I have an array and I would like to push some data to it.

this.myArray.push(['a' => 'b']);

Unfortunately this does not work with Vue 3 as myArray appears to be wrapped in a proxy object.

Does anyone know how to push to an array in Vue 3?

That snippet doesn’t look like valid JavaScript code. What’s ['a' => 'b'] supposed to mean? — Parzh
– Parzh, Commented Jun 3, 2021 at 22:58

Dan · Accepted Answer · 2024-02-02 07:16:23Z

47

It depends how you define the array

Using `reactive`:

const myArray = reactive([1,2,3])

myArray.push(4); // push works as normal

const myArray = ref([1,2,3]);

myArray.value.push(4); // With a `ref` you need to use `value`

Other issues:

Your syntax is incorrect for what's being pushed, maybe you want:

myArray.push({ a: 'b' });

Also, keep in mind there is no component this access in the Vue 3 composition API.

answered Nov 29, 2020 at 14:14

Dan

63.5k18 gold badges113 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

What if the array was in an object like const a = ref({c:[]}), how would we push something into c ?

@HaadNadeem a.value.c.push(1). Since a is a ref, you use value. Since c is not a ref, you don't.