Tips for using prop in computed properties

Question

I have a carousel component that receives a prop called 'mediaItems', which I use 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 the component being empty and I get a console error:

Type error: this.mediaItems is undefined

If I remove the computed property, the component loads the props and no console error occurs, but I need this computed property to determine the end of the carousel.

Answer 1

I think you should specify a default value for this property to make computed properties work properly when the mediaItems property has not been set externally:

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