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

Question

我正在使用 vue@2.1.3 和 vue 官方 webpack 模板 来构建应用程序。

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

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

有两个问题：

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

原文由 Jerry Zhang 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 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>

原文由 Bill Criswell 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您是否尝试过初始化所需的所有数据？例如，如果您需要 a b c ，您可以：

 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 错误

原文由 Sabrina Luo 发布，翻译遵循 CC BY-SA 3.0 许可协议