VueJSの計算されたデータとスコープ

Question

私のvuejsコンポーネント内の計算されたプロパティとして配列electionsを作成しようとしています。UI関連の情報をデータストアの配列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 
      } 
     } 
    } 
} 

はしかし、私は「エラー「未定義のプロパティを読み取ることができません 『プッシュ』を」取得しています。ここで間違っている何？

Answer 1

dataメソッドが返される前にthis.electionsを参照するために動作しません。 Vueのインスタンスのデータプロパティがまだ設定されていない。

しかし、あなたは、あなたが何をしようとしてため this.electionsを参照する必要はありません。ちょうどあなたが forEach前に初期化 elections配列を参照。

またcomputedオブジェクトにはdataメソッドがありますが、それはそのオブジェクトの外にある必要があります。

また、@Bertはコメントに記載されているように、配列に追加するときはputの代わりにpushを意味すると考えられます。ここで

は、それがどのように見えるかです：

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