vue：未捕获类型错误：无法读取未定义的属性...

我在用着[电子邮件受保护] /cdn-cgi/l/email-protection和vue 官方 webpack 模板 https://github.com/vuejs-templates/webpack构建一个应用程序。

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

我从中学到了here https://forum-archive.vuejs.org/topic/3953/cannot-read-property-warning/2这是因为“渲染组件时数据并不完整，而是从 API 加载的”。解决方案是“使用v-if仅在加载数据后才呈现模板的该部分。”

有两个问题：

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

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

所以而不是像这样：

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

Do

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