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

Question

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

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

我从here那里了解到，这是因为"the data is not complete when the component is rendered, but e.g. loaded from an API."，解决方案是"use v-if to render that part of the template only once the data has been loaded."

有两个问题：

我尝试将 v-if 包含在生成警告的多个语句周围，但我个人认为此解决方案过于冗长。有什么巧妙的方法吗？
"warnings" 在本地开发中变成 "fatal errors"（HTML 无法呈现）在生产中。如何使它们相同？例如他们都发出警告或错误？

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>

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

Answer 3

伙计们是对的，但我可以补充一些东西。如果您的条件中的根元素可能由于某种原因未定义，那么使用类似这样的东西是一种很好的做法：v-if='rootElement && rootElement.prop'。它将确保您不会获得 cannot get property prop of undefined，因为当 rootelement 未定义时，它不会进一步检查。

Answer 4

2021 vue3

我们可以这样使用

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

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

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

vue.js

vue-component

netlify