使用 v-for 将对象传递给组件

如何解决使用 v-for 将对象传递给组件

我正在尝试使用 v-for 将数组中的一系列对象发送到子组件，但是当我尝试从子组件访问它们时，它告诉我没有定义道具。 我实际上使用了 Quasar Framework

这是我传递数据的方式：

<div class="row justify-center">
   <foo
      v-for="brand in brands"
      :key="brand.id"
      :brand="brand"
      ></foo>
</div>
<script>
import foo from "src/components/foo.vue";
export default {
  components: {
    foo
  },data() {
    return {
      brands: []
    };
  },methods: {
    async getData() {
      let x = await get.getData();
      this.brands = x.data;
      console.log(this.brands);
    }
  },mounted() {
    this.getData();
  }
};
</script>

brands 是一个数组，它从对本地数据库发出的请求中获取两个对象，我已经验证它正确接收了数据

这是组件文件以及我如何尝试获取属性：

<q-card class="my-card" flat bordered>
   <q-img
      :src="require(`../assets/${brand.img}`)"
      :alt="brand.img + ' logo'"
   />

   <div class="text-h5 q-mt-sm q-mb-xs">{{ brand.name }}</div>
      <div class="text-caption text-grey">
         <p>
            {{ brand.price }}
         </p>
      </div>
<script>
export default {
  name: "foo",props: ["brand"],data() {
    return {
      expanded: false
    };
  },};
</script>

但是当我尝试执行代码时，它给了我以下错误：

Error in render: "Error: Cannot find module './undefined'

我知道一种使它工作的方法，它是为每个对象的值创建一个属性，例如：

<component
   v-for="brand in brands"
   :key="brand.id"
   :name="brand.name"
   :price="brand.price"
   ></component>

但我认为这不是正确的方法......

解决方法

尝试改变

import component from "src/components/component.vue";

到

import foo from "src/components/component.vue";

在您的组件部分，您只需调用 foo 而不是 foo:component