vue v-用于对象道具

时间:2018-11-17 11:05:17

标签: javascript vue.js webpack

我试图将数组对象传递给组件,但是什么也没得到

create.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 个答案:

答案 0 :(得分: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
      } 
}