Vueデータオブジェクト内で関数を実行するにはどうすればよいですか？

Question

だから私はVueのJS内で次のコンポーネントを使用しようとしています：しかし、あなたは私がすべてをするforeachを実行しています見ることができるように

[Vue warn]: data functions should return an object: 
https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function 
(found in component <careers>) 

：

Vue.component('careers', { 
    template: '<div>A custom component!</div>', 

    data: function() { 

    var careerData = []; 

    client.getEntries() 
    .then(function (entries) { 
     // log the title for all the entries that have it 
     entries.items.forEach(function (entry) { 
     if(entry.fields.jobTitle) { 
      careerData.push(entry); 
     } 
     }) 
    }); 

    return careerData; 
    } 
}); 

次のコードは、そうのようなエラーを発し私のContentful entriesのエントリの各オブジェクトは、配列にプッシュされている、私はその後、配列を返そうとするが、私はエラーが発生します。

どのように私のすべての私のentries私のコンポーネント内のデータオブジェクトに抽出することができますか？

私はVueのコンポーネントの外client.getEntries()機能を使用すると、私は次のようなデータを取得する：

Answer 1

この方法では完全に間違っています。

最初のものは、可能な限りデータモデルをきれいに保つことです。そのためのメソッドはありません。

第二の事、エラーが言うように、コンポーネントにデータを扱っているとき、データはオブジェクトを返す関数であること：私が書くように、データフェッチおよびその他のロジックがであってはならない

Vue.component('careers', { 
    template: '<div>A custom component!</div>', 

    data: function() { 
    return { 
    careerData: [] 
    } 
    } 
}); 

モデルが存在するので、VueJSで、そのために予約されたオブジェクトは、methods

だから法にあなたのロジックを動かすと呼ばれ、あなたがデータを持っているとき、あなたはこの

this.careerData = newData 

のようにそれを割り当てることにより、careerDataに割り当てることができます

またはあなたが最後にあなたには、いくつかのライフサイクルフックでメソッドを呼び出すことができますbefore.Andを行ったように、アレイに物事をプッシュ：

Vue.component('careers', { 
    template: '<div>A custom component!</div>', 

    data: function() { 
    return { 
    careerData: [] 
    } 
    }, 

    created: function() { 
    this.fetchData(); 
    }, 

    methods: { 
    fetchData: function() { 
    // your fetch logic here 
    } 
    } 
});