I want to create a todo list in which the tasks are dynamically output from an array with different objects.
somewhere i must have a bug in the probs. i can't get the data from the array up to aufgabenTask.vue component. Anyway the are not output.
Attached is a photo of the error message in devtools from the browser and a photo of how it should actually look.
how it should look like Warning from devtools in Browser
Root-Component:
<template>
<div lass="container-fluid">
<div class="row justify-content-center mt-4">
<div class="col-10 col-sm-10 col-lg-6">
<!--Anfang: InputEintrag-->
<inputAufgabe></inputAufgabe>
<!--Ende:InputEintrag-->
<!-- Anfang: Todo Board-->
<aufgabenBoard :todos="todos" ></aufgabenBoard>
</div>
</div>
</div>
</template>
<script>
import inputAufgabe from "./components/inputAufgabe.vue";
import aufgabenBoard from "./components/aufgabenBoard.vue";
export default {
name: "App",
components: {
inputAufgabe,
aufgabenBoard,
},
data (){
return {
todos: [
{id: 1, aufgabe:"Vue JS Lernen ", priority: -1,},
{id: 2, aufgabe:"Hausaufgaben machen", priority: 0,},
{id: 3, aufgabe:"Müll rausbringen", priority: 1, },
],
}
}
};
</script>
<style>
@import "~bootstrap/dist/css/bootstrap.min.css";
@import "~@fortawesome/fontawesome-free/css/all.min.css";
</style>
Child 1 of Root-Comonent (TaskBoard/ AufgabenBoard):
<template>
<div class="card mt-5">
<div class="card-header">
<h2 class="text-center">TODO-Liste</h2>
</div>
<div class="card-body mt-3 mb-3">
<!-- Anfang von Task-->
<aufgabeTask v-for="todo in todos" :key="todo.id" :todo="todo"/>
<!--Ende: von der Task-->
</div>
</div>
</template>
<script>
import aufgabeTask from "./aufgabeTask.vue";
export default {
name: "aufgabenBoard",
components: {
aufgabeTask,
},
props:{
todo: Array,
}
};
</script>
Child of Child 1 (Task/TaskBoard)
<template>
<div class="task alert alert-primary ">
<div class="row">
<div class="col-9" >Content</div>
<div class="col-3 float-end">
<i class="fas fa-edit me-2" role="button" @click="editEvent"></i>
<i class="far fa-trash-alt" role="button" @click="deleteEvent()"></i>
</div>
</div>
</div>
</template>
<script>
export default {
name: "aufgabeTask",
props: {
todo: Object,
}
};
</script>
<style></style>
Please help i am trying to fix it over 4 hours now