passing object to component using v-for

Question

I am trying to send a series of objects that are in an array to a child component using v-for, but when I try to access them from the child component, it tells me that the props are not defined. Im using Quasar Framework actually

This is how I pass the data:

<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 is an array that obtains two objects from a request made to a local database, which I have already verified that it receives the data correctly

And this is the component file and how I try to get the properties:

<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>

but when I try to execute the code it gives me the following error:

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

I know one way to make it work, and it is by creating a property for each of the object's values, for example:

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

But I dont think thats the correct way to do this....

Answer 1

try to change

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

to

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

on your components section you just call foo instead of foo:component

Answer 2

I am not sure, but:

Looks like ${brand} is empty. Your function GetData() is async, so the <foo> is created before the GetData() has its data set/returned.

You can change <foo v-for="brand in brands" :key="brand.id" :brand="brand"></foo> To <foo v-if="brands.length> 0" v-for="brand in brands" :key="brand.id" :brand="brand"></foo> To make sure that the element is renderd after the data if set.

Note: v-if is when the html is rendered, v-show is just a css display hide, but the html is always renderd