Question

您好，我正在学习vue，正在尝试制作待办事项应用程序，我无法在待办事项应用程序中显示待办事项列表项，我无法弄清楚问题出在哪里。这是我的App.vue：

<template>
  <TodoList id="app" v-bind:todos="todos" />
</template>

<script>
import TodoList from './components/list.vue';

export default {
  name: 'App',
  data() {
    return {
      todos: [
        {
          id: 1,
          title: 'Go workout',
          completed: false
        },
        {
          id: 2,
          title: 'Do laundry',
          completed: false
        },
        {
          id: 3,
          title: 'Cook food',
          completed: false
        }
      ]
    };
  },
  components: {
    TodoList
  }
};
</script>

这是我的list.vue：

<template>
  <div>
    <h2>Todo List</h2>
    <ul>
      <li v-bind:key="todo.id" v-for="todo in todos">
        <Todo v-bind:todo="todo" />
      </li>
    </ul>
  </div>
</template>

<script>
import Todo from './todo.vue';

export default {
  name: 'TodoList',
  components: {
    Todo
  },
  created() {
    console.log(this);
  }
};
</script>

此组件包含待办事项，这是todo.js：

<template>
  <div>{{ todo.title }}</div>
</template>

<script>
export default {
  name: 'Todo',
  props: ['todo'],
  created() {
    console.log('todo', this);
  }
};
</script>

但是可能没有创建待办事项，因为这里没有调用created生命周期。帮我弄清楚问题出在哪里。

Answer 1

您忘记了TodoList组件中的props属性：

export default {
  name: 'TodoList',
  props: ['todos'],
  components: {
    Todo
  },
  created() {
    console.log(this);
  }
};

Vue：无法将值从父组件传递到子组件

1 个答案: