javascript - 使用方法获取数组以使用 V-for 循环进行迭代，但没有显示任何内容

Question

我正在制作一个个人项目来学习 Vue.js 和 Express 如何一起通信。我通过将 Vue 模板中的 prop(要从服务器获取的 watch 品牌)作为参数传递给获取数据的方法，成功地从服务器获取了所需的数据。

该方法在 V-for 声明中被调用，并返回一个对象数组。现在，当我使用在数据函数内实例化的标准数组对此进行测试时，一切都很好，并且数据显示得很好。该方法肯定会获取数据，因为我可以在 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() 方法时，一切正常。该方法返回另一个数组，因此我不明白为什么 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生命周期 Hook 期间将数据加载到products数据属性中。