Vue 3, composition API, Array of refs doesn't work

Question

Please see below code.

<template>
  <div v-for="item in arr" :key="item">{{ item }}</div>
</template>

<script>
import { ref } from "vue";

export default {
  name: "TestArr",
  setup() {
    const arr = [];
    arr.push(ref("a"));
    arr.push(ref("b"));
    arr.push(ref("c"));
    return { arr };
  }
};
</script>

And the output is below

{ "_rawValue": "a", "_shallow": false, "__v_isRef": true, "_value": "a" }
{ "_rawValue": "b", "_shallow": false, "__v_isRef": true, "_value": "b" }
{ "_rawValue": "c", "_shallow": false, "__v_isRef": true, "_value": "c" }

expected output

a
b
c

I have to call item.value in the template to make it work. What's the work around for this sinario for vue3?

Cheers!

Answer 1

You are doing it wrong; try following

setup() {
    const arr = ref([]);
    arr.value.push("a");
    arr.value.push("b");
    arr.value.push("c");
    return { arr };
  }

Their is no point adding ref items in normal array. the Array should be ref.

Answer 2

They should be accessed using value field:

  setup() {
    const arr = [];
    arr.push(ref("a").value);
    arr.push(ref("b").value);
    arr.push(ref("c").value);
    return { arr };
  }

but this is a bad practice, your should define your array as ref then push values to it:

  setup() {
    const arr = ref([]);
    arr.push("a");
    arr.push("b");
    arr.push("c");
    return { arr };
  }

another crafted solution is to init the array with that values:

  setup() {
    const arr = ref(["a","b","c"]);
   
    return { arr };
  }

Answer 3

Some Information about ref() and reactive() which may be useful for future readers

Here is something I found while debugging

According to the document, ref() should be used for primitive value and reactive() for object. As a result, if we write some codes like the example below, Vue can't detect the change of the value , the UI would if course not reactive too:

//using ref with array
const arr = ref([]);

return {
  arr
}

So i used reactive() and wrapped the value(array) directly,however, I still ran into lots of bugs when I tried to mutate the value inside arr .:

const arr = reactive([])

return {
 arr
}

At the end, I solved the problem by rewriting my code to something below, and everything just work properly:

const state = reactive({
  arr: []
})

return {
  ...toRefs(state)
}

my conclusion

It seems that when it comes to ref() and reactive() in composition API the "object" does not include "array" which was defined as one type of object in JavaScript.

Answer 4

This is the correct answer

setup() {
    const arr = ref([]);
    arr.value.push("a");
    arr.value.push("b");
    arr.value.push("c");
    console.log(arr.value)
    return { arr };
  }

This option is possible, but the first is much better.

const arr = reactive([]);
      arr.push("a")
      arr.push("b")
      arr.push("c")
      console.log(arr)