加载后在 VueJs 2 组件中运行函数

Question

组件安装后如何获取数据？
我启动我的 vue 实例，然后加载组件，组件模板加载正常，但 mount 中的函数调用从未运行，因此 stats 对象保持为空，进而导致需要数据。

那么如何在组件加载时运行某个功能？

不管它的价值...我想调用的函数都会发出 REST 请求，但每个组件都会运行不同的请求。

Vue.component('homepage', require('./components/Homepage.vue'), {
  props: ["stats"],
  mounted: function() {
    this.fetchEvents();
    console.log('afterwards');
  },
  data: {
    loading: true,
    stats: {}
  },
  methods: {
    fetchEvents: function() {
      this.$http.get('home/data').then(function(response) {
        this.stats = response.body;
        this.loading = false;
      }, function(error) {
        console.log(error);
      });
    }
  }
});

const vue = new Vue({
  el: '#main',
  mounted: function() {
    console.log('main mounted');
  }
});

Answer 1

通过将所有初始化内容放入mounted，您已经做得很好了。您的组件没有刷新的原因可能是因为绑定了this，如下所述：

在您的fetchEvents 函数中，您的$http 成功处理程序提供了一个响应，您正试图将其分配给this.stats。但它失败了，因为 this 指向该匿名函数范围，而不是 Vue 组件。

要解决这个问题，您可以使用如下所示的箭头函数：

fetchEvents: function() {
  this.$http.get('home/data').then(response => {
    this.stats = response.body;
    this.loading = false;
  }, error => {
    console.log(error);
  });
}

箭头函数不会在内部创建自己的作用域或this。如果你在如上所示的箭头函数中使用this，它仍然指向Vue组件，因此你的组件将更新它的数据。

注意：即使是错误处理程序也需要使用箭头函数，以便您可以使用this（Vue 组件的）进行任何错误记录。