Question

我正在使用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包裹在多个语句中，这些语句会产生警告但个人认为这个解决方案很冗长。有一个简洁的方法吗？

Answer 1

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

所以不是像：

<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未定义，它将无法进一步检查。

vue：未捕获TypeError：无法读取未定义

3 个答案: