1. 程式人生 > 其它 >vue父元件中v-for迴圈呼叫子元件

vue父元件中v-for迴圈呼叫子元件

子元件craNum.vue:

<template>
    <div>
        <div>
            <div>
                {{text}}
            </div>
            <div class="num mf" >
              <number-scrollUp :value = "num" ></number-scrollUp>
            </div>
            <div>{{unit}}</div>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        text: {
            default: '卸貨車輛'
        },
        num: {
            default: 0
        },
        unit: {
            default: '輛'
        }
    },
    mounted() {
        this.oldNum = this.num;
    }
}
</script>

  父元件:

<cart-num                 style="margin-right: .08rem;"                 v-for="(item, key) in numList"                 :key="key"                 :text="item.text"                 :num="item.num"                 :unit="item.unit"             ></cart-num>   script: import cartNum from './component/carNum'; export default {     data() {         return {             numList: [ {                         text: '訂貨戶數',                         num: this.summaryData.allQuantCustomer,                         unit: '戶'                     },                     {                         text: '訂單數量',                         num: this.summaryData.allQuantDelivery,                         unit: '條'                     },                     {                         text: '訂單金額',                         num: this.summaryData.allAmountDelivery,                         unit: '萬元'                     },                     {                         text: '分揀品規',                         num: this.summaryData.allProductGauge,                         unit: '個'                     } ] } } } 部分css省去。