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

Question

I'm using [email protected] 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:

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

Bill Criswell · Accepted Answer · 2018-02-28 00:33:11Z

78

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>

edited Feb 28, 2018 at 0:33

answered Dec 9, 2016 at 2:06

Bill Criswell

33k8 gold badges80 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jerry Zhang Over a year ago

Thank you for your quick reply. This works. While I wonder if this is the only solution since I don't really want to remember to put a v-if on top of every component that has AJAX call. But your solution has already removed a large part of my headache. Thanks again.

Bill Criswell Over a year ago

No problem. I'm not sure how much data you're loading but you might be able to load it all up front then when that's ready show the rest of your app.

Sabrina Luo · Accepted Answer · 2016-12-09 02:44:37Z

10

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

answered Dec 9, 2016 at 2:44

Sabrina Luo

4,0504 gold badges19 silver badges37 bronze badges

Comments

Marek Urbanowicz · Accepted Answer · 2016-12-09 08:07:19Z

8

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.

answered Dec 9, 2016 at 8:07

Marek Urbanowicz

13.8k19 gold badges68 silver badges93 bronze badges

1 Comment

Amir Choubani Over a year ago

Is rootElement predefined or what ?

rnewd_user · Accepted Answer · 2021-11-30 04:56:05Z

2

2021 vue3

we can use like this

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

answered Nov 30, 2021 at 4:56

rnewd_user

1,72215 silver badges17 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related