I am currently working on a Nuxt 3 Project and have created a component that generates a variable amount of elements. When calling the element, it is passed an array as a parameter. In the script setup, I define this array as 'list' and intend to use it within the mounted function to map specific data points onto my data.
Below is an example of the component in use where the array is passed to the element. Each of the variables (x.data.attr..) is a String.
<Menu
:items="[
{
bildURL: x.data.attributes.BildKasten1.data.attributes.url,
Text: x.data.attributes.TextKasten1,
KartenTitel: x.data.attributes.KartenTitel1,
},
{
bildURL: x.data.attributes.BildKasten2.data.attributes.url,
Text: x.data.attributes.TextKasten2,
KartenTitel: x.data.attributes.KartenTitel2,
},
]"
/>
My Setup:
<script lang="ts" setup>
import { faThList } from '@fortawesome/free-solid-svg-icons';
const props = defineProps({
items: {
Array,
},
});
const list = ref(
props.items.map((item) => {
return { ...item, open: false };
}),
);
</script>
Within the normal script tag (I removed the methods since they are not relevant here):
<script lang="ts">
export default {
data() {
return {
obj: {},
};
},
mounted() {
console.log(list);
for (i in list) {
this.obj[i.KartenTitel] = idx > 0 ? false : true;
}
},
};
</script>
Unfortunately, the code is not working as expected and the console displays the error message:
Uncaught (in promise) ReferenceError: list is not defined
The most frustrating part is that it was working yesterday when I turned it off, but today it's not. There haven't been any changes made in between. Why isn't it working now? Shouldn't 'list' be defined since it is declared within the setup?