質問編集履歴

自己解決版を追記

2018/12/05 03:15

投稿

スコア105

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -125,3 +125,137 @@
 ご教示のほど、よろしくお願いいたします。
+---
+※追記
+**自己解決版**
+```
+# ParentComp.vue
+<template>
+  <div>
+    <child-comp
+      v-for="(item, idx) in items"
+      :key="idx"
+      v-bind:items="items"
+      v-bind:idx="idx" />
+    <p>{{ total }}</p>
+  </div>
+</template>
+<script>
+import ChildComp from '@/components/ChildComp'
+export default {
+  name: 'parent-comp',
+  data () {
+    return {
+      items: ['', '', '', '', ''],  // 行追加/削除ボタンをつけるので仮置き
+      total: 0
+    }
+  },
+  updated() {
+    let result = this.items.map(Number).reduce(function(sum, price) {
+      return sum + price
+    })
+    this.total = Math.floor(result * 1.08)
+  },
+  methods: {
+    addRow() {
+      this.items.push('')
+    }
+  },
+  components: {
+    ChildComp
+  }
+}
+</script>
+```
+```
+# ChildComp.vue
+<template>
+  <div>
+    <input v-model="items[idx]" type="text" class="input"/>
+    <span>{{ priceWithTax(items[idx]) }}</span>
+  </div>
+</template>
+<script>
+export default {
+  name: 'child-comp',
+  props: ['items', 'idx'],
+  methods: {
+    priceWithTax(price) {
+      return Math.floor(price * 1.08)
+    }
+  }
+}
+</script>
+```