Question

我已经通过Jayson从服务器加载了异步数据。完成加载后，布尔值“ loading”设置为false，但是我的内容没有重新呈现。我可以在控制台上看到数据已正确加载。

var App = new Vue({
  el: '#app',
  data: {
    title: 'test',
    data: [],
    loading: true
  },
  created() {
    this.getProjectDataFromServer()
  },
  methods: {
    getProjectDataFromServer() {
      client.request('get', null, function(err, response) {
        if(err) throw err;
        this.data = response.result;
        this.loading = false;
        console.log(this.data);
      });
    }
  }
});

<main id='app'>
  <div v-if="loading===false" :key="loading">
    IT WORKS
  </div>
</main>

Answer 1

使用lambda代替函数来捕获this的上下文。

getProjectDataFromServer() {
      client.request('get', null, (err, response) => {
        if(err) throw err;
        this.data = response.result;
        this.loading = false;
        console.log(this.data);
      });
    }

或在函数外部的闭包中捕获this上下文。

getProjectDataFromServer() {
      const that = this;
      client.request('get', null, function (err, response) {
        if(err) throw err;
        that.data = response.result;
        that.loading = false;
        console.log(that.data);
      });
    }

异步加载的数据将不会呈现

1 个答案: