Question

我尝试在我的vuejs组件中创建一个数组elections作为计算属性，方法是向我的数据存储区的数组elections添加一些与UI相关的信息。

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

然而，我得到了一个＆＃34;无法读取属性＆＃39;推送＆＃39;未定义＆＃34;＆＃34;错误。这有什么不对？

Answer 1

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

VueJS计算数据和范围

1 个答案: