道具在道具期间变得未定义答案

【问题标题】：Props became undefined during props道具在道具期间变得未定义
【发布时间】：2018-07-08 11:19:56
【问题描述】：

这是我使用 webpack 的 vue 项目的一部分。

<template>
<div>
      <p>notes is: {{notes}}</p>
      <p>{{notes[0]}}</p>
      <Card :note="notes[0]"/>
      <Card :note="this.notes[0]"/>
</div>
</template>

<script type="text/javascript">
  import Card from './Card/Card.vue'
  export default {
    name: 'Card',
    props: ["notes"],
    components: {
      Card
    }
  }
</script>

notes 是父组件的 props 值。

这是网页编译后的结果。

如您所见，notes 是一个数组，显示在 p 元素中。

但是当我尝试将它支持到子组件时，浏览器会抛出错误：无法读取未定义的属性“0”。

是什么让notes 未定义？

【问题讨论】：

你从哪里得到笔记？因为您在它们被填充之前访问它们，所以出现错误。

标签： vuejs2

【解决方案1】：

当你的子组件被挂载时，'notes' 是不可访问的。因此，vue 在渲染期间无法访问所需的值。

只需在模板中添加一个引用保护，无论您将其作为道具传递给子组件

<Card :note="notes && notes[0]"/>

【讨论】：

【解决方案2】：

props 在组件渲染之前是不可用的，你可以使用 v-if 并且不会报错

【讨论】：