I'm new to vue.js and I'm trying to follow this

App.vue

<template>
    <div >
        <Header title="Task Tracker" />
        <Tasks :tasks="tasks" />
    </div>
</template>

// --------------------------------------

<script>
import Header from "./components/Header.vue"
import Tasks from "./components/Tasks.vue"

export default {
    name: "App",
    components: {
        Header,
        Tasks
    },
    data() {
        return {
            tasks: []
        }
    },
    created() {
        this.tasks = [
            {
                id: "1",
                text: "Doctors Appointment",
                day: "March 5th at 2:30pm",
                reminder: true
            },
            {
                id: "2",
                text: "Meeting with boss",
                day: "March 6th at 1:30pm",
                reminder: true
            },
            {
                id: "3",
                text: "Food shopping",
                day: "March 7th at 2:00pm",
                reminder: false
            }
        ]
    }
}
</script>

// --------------------------------------

<style>
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}
</style>

Header.vue

<template lang="">
    <header>
        <h1>
            {{ title }}
            <Button text="Add Task" color="green" />
            <Button text="Update Task" color="blue" />
            <Button text="Delete Task" color="red" />
        </h1>
    </header>
</template>

// --------------------------------------

<script>
import Button from "./Button.vue"

export default {
    name: "Header",
    props: {
        title: String
    },
    components: {
        Button
    }
}
</script>

// --------------------------------------

<style scoped>
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
</style>

Tasks.vue

<template lang="">
    <div :key="task.id" v-for="task in tasks">
        <Task :task="task" />
    </div>
</template>

// --------------------------------------

<script>
import Task from "./Task.vue"

export default {
    name: "Tasks",
    props: {
        tasks: Array
    },
    component: {
        Task
    }
}
</script>

Task.vue

<template lang="">
    <div >
        <h3>{{ task.text }}</h3>
        <p>{{ task.day }}</p>
    </div>
</template>

// --------------------------------------

<script>
export default {
    name: "Task",
    props: {
        task: Object
    }
}
</script>

<style scoped>
.task {
    background: chocolate;
}

.task .reminder {
    border: 5px solid green;
}
</style>

Button.vue

<template>
    <button :style="{ background: color }"  @click="onClick()">
        {{ text }}
    </button>
</template>

// --------------------------------------

<script>
export default {
    name: "Button",
    props: {
        text: String,
        color: String
    },
    methods: {
        onClick() {
            console.log("click")
        }
    }
}
</script>

// --------------------------------------

<style></style>

What did I forget ? I'm not sure why I can't get my JSON data to display, I kept getting

CodePudding user response：

In tasks.vue you have an error. Replace component:{ with components:{