Vuejs - How to set the default value of a prop to a predefined data?

Question

The question is simple. I want to define a data as follows;

data() {
  return {
    logoURL: "some-link/some-picture.png"
  }
}

and I want to set it to a prop's default state like this:

props: {
  infoLogoURL: {
    type: String,
    default: this.logoURL,
  },
}

Apparently it doesn't work the way I want and I have this error:

Uncaught TypeError: Cannot read property 'logoURL' of undefined

How can I manage this? Here is an example of how I use my props:

And here is another question... I want to display infoIcon when there is no infoLogoURL. So let's say the link of that specific .png file is not available in a moment of time, so in that case, I want to display the infoIcon. When the .png file is available, I should only display the infoLogoURL, not the infoIcon. How do I do that?

user_12701949 · Answer

You can't set the default value of a prop from data.

One way around this is to use a computed property instead:

computed: {
  defaultLogoURL: function() {
    return this.infoLogoURL || this.logoURL
  }
}

user_7486313 · Answer

You can define a computed property that returns the value of the prop "info_logo_url" when set, and that of data "logoURL" when not.

Concerning the second part of the question, another computed property can be defined to return the prop "info_logo_url" when set, and that of the prop "info_icon" when not.

const cardcomponent = Vue.component('card-component', {
  template: '#card-component',
  data(){
    return { logoURL: "some-link/some-picture.png" }
  },
  props: {
    info_logo_url: { type: String },
    info_icon: { type: String }
  },
  computed: {
    myInfoLogo() { return this.info_logo_url || this.logoURL; },
    myInfoIcon() { return this.info_logo_url || this.info_icon; },
  }
});

new Vue({
  el: '#app',
  components: { cardcomponent },
});

Vuejs - How to set the default value of a prop to a predefined data?

2 Answers