使用一种方法获取数组以通过 V-for 循环进行迭代，但未显示任何内容

Question

我正在做一个个人项目来学习 Vue.js 和 Express 如何一起交流。我设法通过在 Vue 模板中传递一个道具（要从服务器获取的手表品牌）作为获取数据的方法的参数，从服务器获取所需的数据。

在 V-for 声明和 returns 对象数组中调用此方法。现在，当我使用在数据函数中实例化的标准数组对此进行测试时，一切都很好，数据显示也很好。该方法肯定会获取数据，因为我可以在 Vue devtools 中看到它，并且当我将它打印到控制台时。所以它就在那里，但出于某种原因，它不想与 V-for 一起玩得很好。

代码如下：

<template>
    <div class="wrapper">
      <div class="product" v-for="(product, index) in getProductsByBrand(brand)" :key="index">
        <div class="product-name">
          {{ product }}
        </div>
      </div>
    </div>
</template>
<script>
import ProductService from '@/services/ProductService'
export default {
  name: 'product',
  props: [
    'brand'
  ],
  data () {
    return {
      products: [],
      shoppingItems: [
        { name: 'apple', price: '7' },
        { name: 'orange', price: '12' }
      ]
    }
  },
  methods: {
    async getProductsByBrand (brand) {
      const response = await ProductService.fetchProductsByBrand(brand)
      this.products = response.data.product
      console.log(this.products)
      console.log(this.shoppingItems)
      return this.products
    }

当我用 shoppingItems 数组替换 getProductsByBrand() 方法时，一切正常。该方法 returns 另一个数组，所以我不明白为什么 V-for 在显示该数据时遇到问题。

非常感谢任何帮助！

Answer 1

Vue模板由render函数渲染，是一个普通的同步函数。因此您不能在模板中调用 async 函数。更好的代码模式如下：

模板：

<div class="product" v-for="(product, index) in products" :key="index">

脚本：

methods: {
  async getProductsByBrand (brand) {
    const response = await ProductService.fetchProductsByBrand(brand)
    return response.data.product
  }
},
async created() {
  this.products = await this.getProductsByBrand(this.brand);
}

它相当于同一件事，但在 created 生命周期挂钩期间将数据加载到 products 数据属性。

使用一种方法获取数组以通过 V-for 循环进行迭代，但未显示任何内容

Using a method to get array to iterate through with a V-for loop, but nothing is being displayed

javascript

async-await

vue.js

vuejs2

v-for