vue v-for 对象道具

Posted 2023-02-23

【中文标题】vue v-for 对象道具

【英文标题】：vue v-for object props

【发布时间】：2019-04-20 09:26:47

【问题描述】：

我正在尝试将数组对象传递给组件，但没有得到任何东西

创建.vue

<el-row >
      <component1 v-for="product in products" :value="product" :key="product.id"></component1>
</el-row> 

//脚本部分

data() 
    return 
       products: []  //there have (id = 1, name = first), (id = 2, name = second)
    

component1.vue

<el-row>
  <div>
     product.name 
  </div>
</el-row>  

export default 
props: ['value'],
watch: 
  value: 
    hander: function (val) 
      console.log(val);

      this.product = 
        id: val.id,
        name: val.name
       
    ,
    deep: true
  
,
data() 
  return 
    product: 
      id: null,
      name: null
           
      
,  

但手表不起作用（product.name 为空），为什么？或者如何解决这个问题？

【参考方案1】：

您正在尝试查看一个不变的属性，在您的示例中，我不知道需要使用 watch 属性，但您可以通过将 value 分配给您的名为product 在mounted 生命周期钩子中如下：

<el-row>
  <div>
     product.name 
  </div>
</el-row>  

export default 
props: ['value'],
watch: 
  value: 
    handler: function (val) 
      console.log(val);

      this.product = 
        id: val.id,
        name: val.name
       
    ,
    deep: true
  
,
data() 
  return 
    product: 
      id: null,
      name: null
           
      
,
mounted()
this.product= 
        id: this.value.id,
        name: this.value.name