javascript - 在 VueJS 中异步获取数据

Question

我想显示从以下函数获取的数据：

 async getData() {
      let skus = this.skusData;
      const app = { $axios: this.$axios };
      let skusId = this.idSkus;
      const skusPrices = await endPoint.getPrices(app, skusId);
      let data = skus.map((item, i) =>
        Object.assign({}, item, skusPrices[i])
      );
      return data;
    }
async mounted() {
    await this.getData();
  },

我想这样显示：

<div v-for="item in this.getData" :key="item.id">
      <my-favourite
        :name="item.name"
        :img-favorite="item.pictures"
        :color="item.color"
        :price="item.inclTax"
      />
    </div>

但是，它没有按预期工作。

标签： javascriptvue.js

Answer 1

您的代码存在许多问题（逻辑上和句法上）。我的结构如下：

data() {
  return {
    skuData: []
  }
},
 async getData() {
    const { data } = await this.$axios.get('endpoint');
    this.skuData = data // or however it is sent back
 },
 mounted() {
   this.getData();
  },

然后在您的模板中：

不要this在您的模板中使用（那里不可用）。

<div v-for="item in skuData" :key="item.id">
      <my-favourite
        :name="item.name"
        :img-favorite="item.pictures"
        :color="item.color"
        :price="item.inclTax"
      />
</div>

让我知道你从上面得到了什么，我们可以相应地移动东西。