Как привязать данные от родительского к дочернему компоненту внутри v-for - PullRequest
Новая
       8

Как привязать данные от родительского к дочернему компоненту внутри v-for

0 голосов
/ 03 октября 2019

Итак, у меня есть такие модальные компоненты, как это 

<el-dialog title="Shipping address" :visible.sync="dialogTableVisible">
<table>
  <tr>
    <th style="width:300px">Description</th>
    <th style="width:300px">Quantity</th>
    <th style="width:300px">Unit Price</th>
    <th style="width:300px">Amount (Rp. )</th>
  </tr>
  <tr v-for="(item, ind) in invoiceDetails.chargesList" :key="ind" class="h-2">
    <td>{{ item.description }}</td>
    <td>{{ item.qty }}</td>
    <td>{{ item.unitPrice }}</td>
    <td>{{ item.totalPrice }}</td>
  </tr>
  <tr v-for="(invoiceProduct, k) in invoiceProducts" :key="k">
    <td>
      {{ invoiceProduct.name }}
    </td>
    <td>
      {{ invoiceProduct.qty }}
    </td>
    <td>
      {{ invoiceProduct.price }}
    </td>
    <td>
      {{ invoiceProduct.lineTotal }}
    </td>
  </tr>
  <tr class="h-2">
    <td>Subtotal :</td>
    <td>{{ subtotalCharges }}</td>
  </tr>
  <tr class="h-2">
    <td>Tax(10%) :</td>
    <td>{{ taxedCharges }}</td>
  </tr>
  <tr class="h-2">
    <td>Total :</td>
    <td>{{ totalCharges }}</td>
  </tr>
</table>

и, как вы можете видеть, есть 2 v-for. Как связать данные из родительского компонента? первый цикл - это данные, которые я получаю от API, а второй - от динамически добавляемой строки

, это родительский компонент: 

<template>
  <div>
   <PreviewModal
   :dialogTableVisible="dialogTableVisible"/>
  </div>
</template>

<script>
 export default {
  data() {
   return {
     invoiceProducts: []
   }
 }
}
</script>

"invoiceProducts" будет заполнендобавив новую строку таблицы и вот json: 

"chargesList": [
        {
            "description": "Ocean Freight (Measurement: 5.75 CBM)",
            "qty": "1",
            "unitPrice": "57.5",
            "unitBy": "-",
            "totalPrice": "57.5"
        },
        {
            "description": "Charge1",
            "qty": "1",
            "unitPrice": "10",
            "unitBy": "-",
            "totalPrice": "10"
        },
        {
            "description": "Fast",
            "qty": "1",
            "unitPrice": "20",
            "unitBy": "-",
            "totalPrice": "20"
        }
    ]
...