vue: Uncaught TypeError: Cannot read property ... of undefined答案

【问题标题】：vue: Uncaught TypeError: Cannot read property ... of undefinedvue: Uncaught TypeError: Cannot read property ... of undefined
【发布时间】：2017-04-24 10:24:25
【问题描述】：

我正在使用 vue@2.1.3 和 vue official webpack template 来构建一个应用程序。

在本地开发时，经常看到警告Uncaught TypeError: Cannot read property ... of undefined，但是可以成功渲染HTML。但是，当使用npm run build 命令将 HTML 部署到 Netlify 时，无法呈现 HTML。所以我必须认真对待这个警告。

我从here 了解到，这是因为“渲染组件时数据不完整，但例如从 API 加载。”解决方案是“仅在加载数据后使用v-if 呈现模板的该部分。”

有两个问题：

我尝试将v-if 包裹在产生警告的多个语句中，但我个人认为这个解决方案很冗长。有没有简洁的方法？
本地开发中的“警告”在生产中变成“致命错误”（HTML 无法呈现）。如何使它们相同？例如他们都发出警告或错误？

【问题讨论】：

标签： vue.js vue-component netlify

【解决方案1】：

只需在依赖于该 AJAX 调用的模板中所有元素的共同父级上使用 v-if，而不是围绕每个元素。

所以不要像这样：

<div>
  <h1 v-if="foo.title">{{ foo.title }}</h1>
  <p v-if="foo.description">{{ foo.description }}</p>
</div>

做

<div>
  <template v-if="foo">
    <h1>{{ foo.title }}</h1>
    <p>{{ foo.description }}</p>
  </template>
</div>

【讨论】：

感谢您的快速回复。这行得通。虽然我想知道这是否是唯一的解决方案，因为我真的不想记得在每个具有 AJAX 调用的组件之上放置一个v-if。但是您的解决方案已经消除了我大部分的头痛。再次感谢。
没问题。我不确定您正在加载多少数据，但您可能可以预先加载所有数据，然后在准备好后显示您的应用程序的其余部分。

【解决方案2】：

伙计们是对的，但我可以补充一点。如果条件中的根元素可能由于某种原因未定义，则最好使用类似的内容：v-if='rootElement && rootElement.prop'。它将确保您不会收到cannot get property prop of undefined，因为当rootelement 未定义时，它不会进一步检查。

【讨论】：

【解决方案3】：

您是否尝试过初始化所有需要的数据？例如如果你需要abc，你可以这样做：

new Vue({
  data: {
    a: 1,
    b: '',
    c: {}
  },
  created(){
    // send a request to get result, and assign the value to a, b, c here

  }
})

这样你就不会收到任何xx is undefined 错误

【讨论】：

【解决方案4】：

2021 vue3

我们可以这样使用

props: {
    form: {
      type: String,
      required: true,
    },
 setup(props, context) {
    console.log(props.form)

【讨论】：