javascript - VueJS计算的数据和范围

我正在尝试通过将更多与UI相关的信息添加到数据存储区的数组elections中，将数组elections创建为vuejs组件中的计算属性。

export default {
    computed: {
        data() {
           var elections = [];
           this.$dataStore.state.elections.forEach((el) => {
               console.log(this);
               var election = { id:el.id, icon: 'assignment', iconClass: 'blue white--text', title: el.title, subtitle: 'Jan 20, 2018' };
               this.elections.push(election);
           });

           return {
              elections: this.elections
           }
       }
    }
}

但是，我收到“无法读取未定义的属性'推'”的错误。这是什么问题？

最佳答案

在返回this.elections方法之前引用data无效，因为尚未设置Vue实例的数据属性。

但是，您无需参考this.elections即可执行操作。只需引用在elections之前初始化的forEach数组。

另外，您在data对象中具有computed方法，但是它应该在它的外部。

另外，正如评论中提到的@Bert一样，添加到数组时，您可能是指push而不是put。

它应该是这样的：

export default {
  data() {
    var elections = [];
    this.$dataStore.state.elections.forEach((el) => {
      var election = { id:el.id, icon: 'assignment', iconClass: 'blue white--text', title: el.title, subtitle: 'Jan 20, 2018' };
      elections.push(election);
    });

    return {
      elections: elections
    }
  }
}