Vue prop undefined in initial call to computed functions

Question

I have the following Vue component:

Vue.component('result', {
  props: ['stuff'],
  data: () => ({}),
  template: "<img :src='tag' class='result'></img>",
  computed: {
    tag: function tag() {
      return `pages/search/img/${this.stuff.type.toLowerCase()}_tag.png`;
    }
  }
});

When the component is created, an error is thrown:

TypeError: Cannot read property 'toLowerCase' of undefined
  at VueComponent.tag

However, when I remove the call to toLowerCase(), the method executes properly, generating a string with the expected type. I could work around this by changing my filenames to have capital letters, but I would rather understand why Vue is behaving this way. Why would a property be undefined only when methods are called on it?

Update: after some troubleshooting, I found that this.stuff.type is undefined the first time tag() is computed. Calling toLowerCase() just forces an error on an otherwise silent bug. Is there a reason the props aren't defined when computed functions are called for the first time? Should I be writing my component differently?

Ricky Ruiz · Accepted Answer · 2019-04-12 17:33:09Z

4

The stuff prop is undefined when the result component is created.

There are two options to fix this problem:

Either use the v-if directive in the parent component's template to make sure stuff has a value when the result component is created:

<template>
  <result v-if="stuff" :stuff="stuff" />
</template>

Or handle the stuff prop being undefined in the result component.

Vue.component('result', {
  props: {
    // Object with a default value
    stuff: {
      type: Object,
      // Object or array defaults must be returned from
      // a factory function
      default: () => ({ type: 'someType'})
    },
  },

  data: () => ({}),

  template: "<img :src='tag' class='result' >",

  computed: {
    tag: function tag() {
      return `pages/search/img/${this.stuff.type.toLowerCase()}_tag.png`;
    }
  }
})

Note: The img element is a void element, it does not require an end tag.

edited Apr 12, 2019 at 17:33

answered Apr 12, 2019 at 17:18

Ricky Ruiz

27k7 gold badges49 silver badges61 bronze badges

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

Comments

BTL · Accepted Answer · 2019-04-12 16:00:56Z

0

Props are by default null but you can give them a default value to overcome this problem.

Example :

Vue.component('result', {
  props: {
    stuff: {
      type: Object,
      default: {
        type: ''
      }
    }
  },
  data: () => ({}),
  template: "<img :src='tag' class='result'></img>",
  computed: {
    tag: function tag() {
      return `pages/search/img/${this.stuff.type.toLowerCase()}_tag.png`;
    }
  }
});

answered Apr 12, 2019 at 16:00

BTL

4,7243 gold badges28 silver badges37 bronze badges

Collectives™ on Stack Overflow

Vue prop undefined in initial call to computed functions

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related