"Error: Vue prop is not defined when passed to computed functions during initial call

Question

"Error: Vue prop is not defined when passed to computed functions during initial call

I am encountering an issue with my Vue component. Here is the code for reference:

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

Upon creating the component, I receive an error message:

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

Strange enough, without using toLowerCase(), the method functions correctly and generates the expected string. I could potentially adjust my file names to avoid this issue, but I am more interested in understanding why Vue is behaving like this. Why does a property become undefined only when methods are invoked on it?

Update: Further investigation revealed that this.stuff.type is indeed undefined during the initial computation of tag(). The usage of toLowerCase() simply exposes an error in what would have otherwise been a silent bug. Is there a specific reason why props are not defined when accessed from within a computed function for the first time? Should I be structuring my component differently?

javascript vue.js

Answer 1

Answer №1

At the time of creating the result component, the stuff prop is found to be undefined.

To resolve this issue, there are two possible solutions:

One option is to include the v-if directive in the parent component's template to ensure that stuff has a value when the result component is initialized:

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

Alternatively, you can handle the scenario where the stuff prop is undefined within the result component itself.

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`;
    }
  }
})

Please note: The img element is a void element and does not require an end tag.

Answer 2

At the time of creating the result component, the stuff prop is found to be undefined.

To resolve this issue, there are two possible solutions:

One option is to include the v-if directive in the parent component's template to ensure that stuff has a value when the result component is initialized:

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

Alternatively, you can handle the scenario where the stuff prop is undefined within the result component itself.

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`;
    }
  }
})

Please note: The img element is a void element and does not require an end tag.

Answer 3

Answer №2

By default, props are set to null, but you can assign them a default value to resolve this issue.

For instance:

Vue.component('result', {
  props: {
    item: {
      type: Object,
      default: {
        category: ''
      }
    }
  },
  data: () => ({}),
  template: "<img :src='link' class='image'></img>",
  computed: {
    link: function() {
      return `images/${this.item.category.toLowerCase()}_img.png`;
    }
  }
});

Answer 4

By default, props are set to null, but you can assign them a default value to resolve this issue.

For instance:

Vue.component('result', {
  props: {
    item: {
      type: Object,
      default: {
        category: ''
      }
    }
  },
  data: () => ({}),
  template: "<img :src='link' class='image'></img>",
  computed: {
    link: function() {
      return `images/${this.item.category.toLowerCase()}_img.png`;
    }
  }
});

"Error: Vue prop is not defined when passed to computed functions during initial call

Answer №1

Answer №2

Similar questions

In the ajax call, an empty JSON array object is sent as the data

Attempting to minimize the number of jQuery calls within a Domino XPage

Increasing space at the top with heading

Problem with a for loop: retrieve only the final item

JS and its dynamic color changes

Distinctive titles for JavaScript constructors/prototypes compared to classes

What is the best way to transform an array of objects into MenuItems for a Material-UI Select component?

Encountering a Vue syntax error following the binding of a session variable

Angular Bootstrap notifications will stay open indefinitely and will not automatically dismiss after a certain period

I am looking to transmit information to the controller using AJAX

Does creating a form render the "action" attribute insignificant in an AJAX environment?

The backend API seems to be facing issues with loading images fully in Vuejs

hitting the value of the text input

Navigating from an error page to the homepage with Next.JS 13: A quick and easy guide

Learn the process of utilizing JavaScript/Node.js to dynamically upload images onto a webpage directly from a database

Verify if spacebar is pressed and then use jQuery to add a hashtag with multi-language support

Change the class of each item in a list individually by hovering over them with the mouse using JavaScript

Creating a custom pipe that converts seconds to hours and minutes retrieved from an API can be achieved by implementing a transformation function

The position of the jQuery VirtualKeyboard is not displaying correctly

Troubleshooting Issues with Implementing JavaScript for HTML5 Canvas