Looking for a way to pass an array from component A (App.vue) through component B to component C? Here's what I have tried:
// A.vue
<script setup>
import B from "./B.vue";
import { reactive } from "vue";
let arrayData = reactive({ [ "hello", "no" ] })
</script>
<template>
<B :arr="arrayData" />
</template>
// B.vue
<script setup>
import C from "./C.vue";
const props = defineProps({
arr: {
type: Array
}
})
</script>
<template>
{{ props.arr[0] }} //this displays "hello"
</template>
However, when I try to pass the same array from B.vue to C.vue using
<C :arr="props.arr" />{{ props.arr[0] }}, I encounter an error message.
https://i.sstatic.net/os13H.png
Although the code provided above has been simplified for clarity, the error message occurs at the exact line where I try to access the 0th index of the array. It seems like passing the array as a prop is causing the issue. If needed, I can provide a link to the GitHub repository in the comments.