问题描述
我正在尝试使用 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