web-dev-qa-db-ja.com

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

だから私はVue JS内で次のコンポーネントを使用しようとしています：

_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;
  }
});
_

次のコードは次のようなエラーを出力します。

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

しかし、ご覧のとおり、Contentful entriesのすべてでforeachを実行していると、エントリ内の各オブジェクトが配列にプッシュされ、配列を返そうとしますが、エラーが発生します。

entriesをすべてコンポーネント内のデータオブジェクトに抽出する方法はありますか？

Vueコンポーネントの外でclient.getEntries()関数を使用すると、次のデータが得られます。

enter image description here

javascriptvue.jsvue-component
9
Nick Maddren

この方法はまったく間違っています。

まず最初に-データモデルを可能な限りクリーンに保ちます-メソッドはありません。

第二に、エラーが言うように、コンポーネントにデータを処理するとき、データはオブジェクトを返す関数でなければなりません：

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

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

私が書いているように、データの取得やその他のロジックはデータ内にあるべきではありません。Vue.jsには、methodsと呼ばれるオブジェクトが予約されています。

したがって、ロジックをメソッドに移動し、データを受け取ったら、次のようにcareerDataに割り当てることができます。

this.careerData = newData

または、以前に行ったように配列に物事をプッシュします。そして最後に、いくつかのライフサイクルフックでメソッドを呼び出すことができます：

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

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

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

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