web-dev-qa-db-ja.com

Vue 2.1 beforeCreateフックのメソッド呼び出しが機能しない

コンポーネントが作成される前に、いくつかのローカルjsonデータに対して非同期呼び出しを行っています。したがって、このコードは実際に正常に動作します。

_  beforeCreate : function() {
    var self = this;
      fetch('/assets/data/radfaces.json')
        .then(function(response) { return response.json()
        .then( function(data) { self.users = data; } );
      })
        .catch(function(error) {
        console.log(error);
      });
  },
_

次に、これをリファクタリングして、別のメソッドに移動したいだけです。

_  beforeCreate : function() {
    this.fetchUsers();
  },

  methods: {
    fetchUsers: function() {
      var self = this;
      fetch('/assets/data/radfaces.json')
        .then(function(response) { return response.json()
        .then( function(data) { self.users = data; } );
      })
        .catch(function(error) {
        console.log(error);
      });
    }
  }
_

そして今、すべてが機能しなくなります。エラーが発生します：app.js:13 Uncaught TypeError: this.fetchUsers is not a function(…)

fetchUsersフックでbeforeCreateメソッドにアクセスできないのはなぜですか？回避策は何ですか？

ajaxasynchronoushookvue.jslifecycle
10
Amit Erandole

methodsがまだ初期化されていないためです。これを回避する最も簡単な方法は、代わりにcreatedフックを使用することです。

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

  methods: {
    fetchUsers: function() {
      var self = this;
      fetch('/assets/data/radfaces.json')
        .then(function(response) { return response.json()
        .then( function(data) { self.users = data; } );
      })
        .catch(function(error) {
        console.log(error);
      });
    }
  }
18
craig_h