CODEWITHSUNDEEP
vue.jsvuejs2vue-component
djangodev
djangodev

Reputation: 353

How to use a prop in computed property?

I have a carousel component that receives a prop 'mediaItems' and I use that prop in a computed property to determine the end of the carousel:

props: ['mediaItems', 'sliderHeading'],
computed: {
  atEndOfList() {
    return this.currentOffset <= (this.paginationFactor * -1) * (this.mediaItems.length / this.windowSize) + this.paginationFactor;
},

This results in an empty component and I get a console error that says:

TypeError: this.mediaItems is undefined

If I remove the computed property, the component loads with props and I don't get console error but I need this computed property to determine the end of the carousel.

Upvotes: 2

Views: 3290

Answers (1)

Anatoly
Anatoly

Reputation: 22758

I suppose you should indicate a default value for this prop in order to make a computed prop to work properly while mediaItems prop is not set yet outside:

props: {
  mediaItems: {
    type: Array,
    default: ()=>[]
  }, 
  sliderHeading: String
}

Upvotes: 2

Related Questions