Vue：未捕获的 TypeError 错误：无法读取未定义的属性...

Question

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

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

我从这里了解到，原因是“组件被呈现时数据不完整，例如从API加载。” 解决方案是“使用v-if仅在数据加载后才呈现模板的那一部分。”

有两个问题：

1. 我尝试将 v-if 包裹在多个语句周围，以解决生成警告的问题，但我个人认为这种解决方案过于冗长。是否有更简洁的方法？
2. 在本地开发中出现的“警告”会在生产环境中变成“致命错误”（HTML 无法呈现）。如何使它们在两个环境中保持一致？例如，它们都发出警告或错误？

- Jerry Zhang

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

---

感谢您的快速回复。这很有效。尽管我想知道是否只有这一个解决方案，因为我不想记得在每个具有 AJAX 调用的组件顶部放置 v-if。但是您的解决方案已经减轻了我的大部分困扰。再次感谢。 - Jerry Zhang

没问题。我不确定您要加载多少数据，但您可能能够一次性加载所有数据，然后在准备就绪时显示应用程序的其余部分。 - Bill Criswell

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 未定义 错误。

- Sabrina Luo

Answer 3

各位说的没错，但我可以补充一些内容。 如果由于某种原因你的根元素在条件中可能是未定义的，最好使用类似这样的代码：v-if='rootElement && rootElement.prop'。这将确保你不会收到“无法获取未定义的属性prop”的错误信息，因为当rootelement未定义时，它不会继续检查。

- Marek Urbanowicz

---

根元素是预定义的还是什么？ - Amir Choubani

Answer 4

2021年vue3版本

我们可以像这样使用：

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

- titleLogin