使用prop在計算屬性中的技巧

Question

我有一個輪播元件，接收一個名為'mediaItems'的prop，我在一個運算屬性中使用這個prop來決定輪播的結束：

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

這導致組件為空，並且我收到一個控制台錯誤：

類型錯誤：this.mediaItems 未定義

如果我移除運算屬性，元件會載入props，並且不會出現控制台錯誤，但是我需要這個運算屬性來決定輪播的結束。

Answer 1

我想你應該為這個屬性指定一個預設值，以便在mediaItems屬性在外部尚未設定時，讓計算屬性正常運作：

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