I am currently working with Vuex and VueJS 3, attempting to loop over an array from the Vuex store. However, I keep encountering an error that says the array is undefined. I have confirmed that the data is logging correctly, but when using it with the v-for directive, it throws an error stating it's undefined.
import { createStore } from 'vuex'
export default createStore({
state: {
AddTaskShown: false,
Tasks: []
},
getters: {
},
mutations: {
ToggleAddTask(state) {
state.AddTaskShown = !state.AddTaskShown;
},
addTask(st, {name, description, date }) {
st.Tasks = [...st.Tasks, {name, description, date}]
},
},
actions: {
},
modules: {
}
})
Here is the code for the store:
<template>
<div class="grid grid-cols-1 gap-1 py-3">
<Task :v-for="Task in $store.state.Tasks" :Task="Task" />
</div>
</template>
<script>
import Task from "@/components/Task.vue";
export default {
components: {
Task,
},
};
</script>
Below is the component code:
<template>
<div class="mx-5 my-1 bg-slate-700 p-4 text-white rounded-lg">
<input type="checkbox" class="w-4 h-4 mr-2"> {{ Task.name }}
</div>
</template>
<script>
export default {
name: "Task",
props: {
Task: Object,
},
};
</script>The error message I am receiving is:
Task.vue?c155:2 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'name')
at Proxy.render (Task.vue?c155:2:1)
at renderComponentRoot (runtime-core.esm-bundler.js?d2dd:896:1)
at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js?d2dd:5580:1)
at ReactiveEffect.run (reactivity.esm-bundler.js?89dc:185:1)
at instance.update (runtime-core.esm-bundler.js?d2dd:5694:1)
at setupRenderEffect (runtime-core.esm-bundler.js?d2dd:5708:1)
at mountComponent (runtime-core.esm-bundler.js?d2dd:5490:1)
at processComponent (runtime-core.esm-bundler.js?d2dd:5448:1)
at patch (runtime-core.esm-bundler.js?d2dd:5038:1)
at mountChildren (runtime-core.esm-bundler.js?d2dd:5234:1)