I try summary item from object from parent in child components-CodePudding

Iam starting with this hobby in VUE3 :) I try summary item books.price from object Object is in parent component and I want make this in child components. I have object in App.vue:

<script>
import BooksList from './components/BooksList.vue'
import BooksLengthMsg from './components/BooksLengthMsg.vue'
import booksSummary from './components/BookSummary.vue'
// import { computed } from 'vue'
export default {
  components: { BooksList, BooksLengthMsg, booksSummary },
  name: 'App',
  data: () => ({
    books: [
      {
        title: 'Windows Powershell w miesiąc',
        price: 20
      },
      {
        title: 'Alicja w krainie czarów',
        price: 18
      }
    ],
    form: {
      title: '',
      price: null
    }
  }),
  methods: {
    removeBook (index) {
      this.books.splice(index, 1)
      console.log('delete', index)
    },
    handleSubmit () {
      const newBook = { ...this.form }
      this.books.push(newBook)
      this.resetForm()
    },
    resetForm () {
      this.form.price = null
      this.form.title = ''
    }
  }
}
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
  <div id="app">
    <header>
      <h1>Books<span>.app</span></h1>
    </header>
    <books-list @remove="removeBook" :books="books" />
    <books-length-msg :books="books"/>
    <form @submit.prevent="handleSubmit">
      <label>
        Title:
        <input v-model="form.title" type="text" name="title">
      </label>
      <label>
        Price:
        <input v-model="form.price" type="number" name="price">
      </label>
      <button type="submit">Add book</button>
    </form>
  </div>
  <books-summary :books="books" />
</template>

and I maked new component BookSummary and I run Books Amount but I cant run function for total price, I cant save in const priceSummary.

<script>
import { ref } from 'vue'
export default {
  name: 'BooksSummary',
  setup () {
    const priceSummary = ref(0)
    return { priceSummary }
  },
  props: {
    books: {
      type: Array,
      required: true
    }
  },
  computed: {
    bookAmount () {
      return this.books.length
    },
    totalPrice () {
    //   const totalPr = this.priceSummary
    //   return this.books.forEach((book) => book.price)
      return this.books.forEach((book) => { console.log(book.price) })
    }
  }
}
</script>
<template>
    <div>Books Amount : {{ bookAmount }}</div>
    <div>Total price : const priceSummary:{{ priceSummary}} function {{ totalPrice }}</div>
</template>
<style>
div {
    padding: 5px;
}
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

CodePudding user response：

It was stupid facil error I change { this.priceSummary = book.price }), but now I must make it with reduce (thx for answer) and make parseInt.

<script>
import { ref } from 'vue'
export default {
  name: 'BooksSummary',
  setup () {
    const priceSummary = ref(0)
    return { priceSummary }
  },
  props: {
    books: {
      type: Array,
      required: true
    }
  },
  computed: {
    bookAmount () {
      return this.books.length
    },
    totalPrice () {
      return this.books.forEach((book) => { this.priceSummary  = book.price })
    }
  }
}
</script>
<template>
    <div>Books Amount : {{ bookAmount }}</div>
    <div>Total price : {{ priceSummary}} {{ totalPrice }}</div>
</template>
<style>
div {
    padding: 5px;
}
</style>

CodePudding user response：

You need to change your totalPrice computed property to:

totalPrice () {
  this.priceSummary = this.books.reduce((sum, book) => sum   book.price, 0)
  return this.priceSummary;
}

Using .reduce is fairly standard and performant way to get a total from array

Here is reference for the reduce function.