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

Posted 2023-02-23

【中文标题】使用 v-for 将对象传递给组件

【英文标题】：passing object to component using v-for

【发布时间】：2021-06-27 23:37:43

【问题描述】：

我正在尝试使用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`)"
      :
   />

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

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

【问题讨论】：

我不会调用你的组件 component 肯定会与 Vue 的内置 dynamic component 冲突

@Phil 我没有在原始代码上调用组件component...我在这里更改了名称以便更容易阅读

我建议你修正你的问题以更好地匹配现实。从下面的答案可以看出，这目前相当混乱

我认为您误解了错误信息。 “错误：找不到模块 './undefined'” 没有说明没有定义道具。您只会从动态 import 或 require 或可能的 <img> 标签中得到该错误，但这些都不会出现在您的问题中。这需要更多的细节和调试步骤才能得到解答

是的，你是对的，我有一张图片，它是我得到错误的地方。我可以访问其他属性。但是来自图像的错误意味着什么？我要修改问题，让图片标签可见

【参考方案1】：

尝试改变

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

到

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

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

【讨论】：

OP 的问题非常令人困惑，因为他们从 component 开始，然后一半改为 foo，但我认为这不是问题

@Phil 没有看到以前的编辑版本，可能不是问题。但未定义为错误消息可能指向导入问题