vue.js - 如何在计算属性中使用道具？

Question

我有一个接收道具“mediaItems”的轮播组件，我在计算属性中使用该道具来确定轮播的结束：

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

这会导致一个空组件，并且我收到一个控制台错误，上面写着：

类型错误：this.mediaItems 未定义

如果我删除计算属性，组件会加载道具并且我不会收到控制台错误，但我需要这个计算属性来确定轮播的结束。

标签： vue.jsvuejs2vue-component

Answer 1

mediaItems我想你应该为这个 prop 指定一个默认值，以便在prop 尚未在外部设置时使计算的 prop 正常工作：

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