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

Question

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 personally I think this solution is verbose. Is there a neater approach?
2. "warnings" in local development turn into "fatal errors" (HTML can't be rendered) in production. How to make them the same in both environments? e.g. both of them issue warnings or errors?

Answer 1

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>

Answer 2

have you tried to initialize all the data you need? e.g. if you need a b c, you can do:

new Vue({
  data: {
    a: 1,
    b: '',
    c: {}
  },
  created(){
    // send a request to get result, and assign the value to a, b, c here

  }
})

In this way you wont get any xx is undefined error

Answer 3

Guys are right but I can add something. If there is possibility that your root element in the condition can be undefined for some reason, it is good practice to use something like that: v-if='rootElement && rootElement.prop'. It will secure you from getting cannot get property prop of undefined as when rootelement is undefined, it will not go further in checking.

Answer 4

2021 vue3

we can use like this

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