Question

我正在尝试从组件中的prop对象初始化数据对象。

调用该组件的视图具有类似的内容

<template>
  <Comp1 :item="itmObj" />
</template>
<script>
  export default {
    name: "myView",
    data: function() {
      return {
        itmObj: {color: "red", size: "Medium", quantity: "10"}
      }
    }
  }
<script>

组件Comp1.vue具有此

<template>
  <div>
    <div>Initial Quantity  {{item.quantity}}</div>
    <div>Available Quantity  {{availableQuantity}}</div>
  </div>
</template>
<script>
  export default {
    name: "comp1",
    props: ["item"]
    data: function() {
      return {
        availableQuantity: this.item.quantity
      }
    }
  }
<script>

我的空白数量为空。

Answer 1

我使用过beforeCreate钩子来设置availableQuantity。调整后的代码如下所示：

<template>
  <div>
    <div>Initial Quantity  {{item.quantity}}</div>
    <div>Available Quantity  {{availableQuantity}}</div>
  </div>
</template>
<script>
  export default {
    name: "comp1",
    props: ["item"]
    data: function() {
      return {
        availableQuantity: 0
      }
    },
    beforeCreate() {
      this.availableQuantity = this.item.quantity;
    }
  }
<script>

如何在Vue JS中将数据属性初始化为prop对象属性

1 个答案: