VueJS计算的数据和范围

Question

我试图创建一个数组elections作为我的vuejs组件内的一个计算属性，通过向我的数据存储的数组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 
      } 
     } 
    } 
} 

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

Answer 1

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

但你并不需要参考this.elections为你想要做什么，只是引用elections阵列您在forEach之前进行初始化。

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

另外，正如评论中提到的@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 
    } 
    } 
}