如何获得深度计算值

Question

我有这么深getter:

        getTotalVideoLength: {
            cache: false,
            get() {
                let duration = 0;

                _.forEach(this.videos, (video) => {
                    duration = duration + video.duration;
                });
    
                console.log(duration);
                
                return duration;
            }
        },

一开始它记录未定义但几毫秒后它记录一个数字，但是当我将 'getTotalVideoLength' 作为 prop 传递给子组件时它总是 NaN。

欢迎任何帮助！

Answer 1

我认为您可能需要稍微改变一下您的方法。我确信您可以使您的代码与计算的属性一起工作，但为什么要用一种 hacky 方法强制它呢？有什么理由需要为此使用计算值吗？如果您使用 data-property 和方法尝试它并调用方法 onMount 来设置 data-property 以便您可以保证这些值在设置之前已经准备好怎么办？请试用此代码并告诉我它是如何工作的。

data() {
  totalVideoLength: 0,
},  
methods: {
  setTotalVideoLength(videos) {
    this.totalVideoLength = videos.reduce((accumulator, { duration }) => accumulator + duration, 0);
  },
},
onMount() {
 this.setTotalVideoLength(this.videos);
}

如何获得深度计算值

how to get a deep computed value

vuejs2

computed-properties

vue-props