Question

我的问题很简单，我想在运行时分配数据并在vue实例中再次获取它们

 data() {
    return {
      panels:[],
    };
  },
  created() {
    this.fetchPanels();
    //console.log(this) , i can find panels already assigned in this instance
    //console.log(this.panels) , it gives me zero array
  },
  methods: {

    fetchPanels() {
        this.$http
        .get(Shared.siteUrl+"/api/" + this.category_title + "/panels")
        .then(function(response) {
          this.panels = response.body.data;
        });
    },

Answer 1

如果您要使用async / await（我同意，您应该使用），那么您也应该在http调用中使用它。 "感觉风格混合不良。这样做的好处是更短。

...

请记住，Vue生命周期不会等待异步生命周期挂钩。在此示例中，这将不是问题，但是牢记绝对是一件好事。也就是说，如果您添加了

.Substring(...)

它将变成空的，因为await somefunc().then()中的异步任务现在将在data() { return { panels:[], }; }, async created() { await this.fetchPanels(); console.log(this.panels); }, methods: { async fetchPanels() { const response = await this.$http.get(Shared.siteUrl + "/api/" + this.category_title + "/panels") this.panels = response.body.data; },之后发生

Answer 2

您的console.log(this.panels)将在异步请求之前被调用。另外，请改用箭头功能。

data() {
    return {
      panels:[],
    };
  },
  created() {
    this.fetchPanels();
    //console.log(this) , i can find panels already assigned in this instance
    //console.log(this.panels) , don't use this here
  },
  methods: {

    fetchPanels() {
        this.$http
        .get(Shared.siteUrl+"/api/" + this.category_title + "/panels")
        .then((response) => {
          this.panels = response.body.data;
          console.log(this.panels);
        });
    }

Answer 3

正如开发人员所建议的那样，vue-resouce使用了Promise异步任务，并等到它给出数据后

data() {
    return {
      panels:[],
    };
  },
  async created() {
    await this.fetchPanels();
    console.log(this.panels)
  },
  methods: {

    fetchPanels:async function() {
        await this.$http
        .get(Shared.siteUrl+"/api/" + this.category_title + "/panels")
        .then((response) => {
          this.panels = response.body.data;
        });
    }

如何在运行时访问Vue实例数据

3 个答案: