vue: Uncaught TypeError: Cannot read property ... of undefined [英] vue: Uncaught TypeError: Cannot read property ... of undefined

问题描述

I'm using vue@2.1.3 and the vue official webpack template to build an app.

When developing locally, I often see the warning Uncaught TypeError: Cannot read property ... of undefined, but the HTML can be rendered successfully. However, the HTML can't be rendered when it's deployed to Netlify with npm run build command. So I have to treat this warning seriously.

I learned from here that it's because "the data is not complete when the component is rendered, but e.g. loaded from an API." and the solution is to "use v-if to render that part of the template only once the data has been loaded."

There are two questions:

1. I tried wrap v-if around multiple statements that's generating the warning but personal I think this solution is verbose. Is there a neat approach?
2. "warnings" in local development turn into "fatal errors"(HTML can't be rendered) in production. How to make them the same? e.g. both of them issue warnings or errors?

解决方案

Just use v-if on a common parent to all the elements in your template relying on that AJAX call, not around each one.

So instead of something like:

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

这篇关于vue: Uncaught TypeError: Cannot read property ... of undefined的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！