javascript - VueJS 计算数据和范围

Question

我正在尝试通过向数据存储的数组 elections 添加一些更多 UI 相关信息，在我的 vuejs 组件中创建一个数组 elections 作为计算属性。

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
           }
       }
    }
}

但是，我收到“无法读取未定义的属性‘push’”错误。这里出了什么问题？

Answer 1

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

但是您不需要引用 this.elections 来执行您想要执行的操作。只需引用您在 forEach 之前初始化的 elections 数组即可。

此外，您的 data 方法位于 compulated 对象中，但它应该位于该对象之外。

此外，正如 @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
    }
  }
}