javascript - Vue.js 数据未在 View 中显示我正在尝试显示仅显示空白的待办事项列表

Question

这是我的 App.vue，我在其中创建了待办事项列表数据并尝试显示所有待办事项数组数据，但没有显示我被困在那里，请帮助我解决该问题

<template>
  <div id="app">
    <ToDo/>

  </div>
</template>

<script>
import ToDo from './components/ToDo';

export default {
  name: 'app',
  components: {
    ToDo
  },
  data ()
  {
    return {
      todos: [
        {
          id: 1,
          title: "TODO 1",
          completed: false
        },
         {
          id: 2,
          title: "TODO 2",
          completed: true
        },
         {
          id: 3,
          title:" TODO 3",
          completed: false
        }
      ]
    }
  }
}
</script>

这是我的 ToDo.vue，我试图传递 todo.title 来显示标题，但不起作用

<template>
    <div>
        <div v-bind:key="todo.id" v-for="todo in todos" >
            {{todo.title}}

        </div>
</div>
</template>


<script>
export default {
    name:"ToDo",
    props: ["todos"]

}
</script>

Answer 1

您应该在控制台中收到警告。

您正在使用 properties但实际上并没有将其发送到组件。

你的模板应该是这样的。

<template>
  <div id="app">
    <ToDo :todos="todos"/>
  </div>
</template>

由于“todos”是一个对象，因此您需要将其作为 Javascript 发送，这就是属性之前 : 的含义。

此外，您绝对应该确保通过在属性的定义中指定对象来将对象发送到组件。

props: {
    todos: Object
}