title: How to calculate total from three components in Vuejs?
body: <p>So, let explain to me what I am trying to achieve I am having a component called <code>RoomDetails</code> which has child components called <code>SelectRoomDetails</code>(In picture its Superior Room, Deluxe Room, Place 3 child components). On selection of rooms, <code>price</code> will be calculated and on the selection of tax, it will get calculated as shown in the picture.</p>
  
  <p>On selection of room <code>SelectRoomDetails</code> will <code>emit</code> an event called <code>total-price</code> where I am passing <code>price</code> and <code>tax</code>. And I am catching that <code>total-price</code> event in <code>RoomDetails</code> and But the problem is I am not able to figure out how to calculate <code>Sum</code> and <code>price</code> is coming from three child components in this case.</p>
  
  <p>My question is how can I write <code>calculateTotalPrice</code> method so it calculates <code>Sum</code> on the selection of room and minus it on deselection of room. Thanks in advance!</p>
  
  <p><strong>SelectRoomDetails.vue</strong></p>
  
  <pre><code>totalPrice(base_price) {
        if(this.selected.length &gt; 0) {
             let price = base_price*this.selected.length;
              let startDate = moment(this.guestCheckIn, "DD.MM.YYYY");
              let endDate = moment(this.guestCheckOut, "DD.MM.YYYY");
  
              let result = endDate.diff(startDate, 'days');
              let days = parseInt(result);
              this.roomtype_net_price = price*days;     
              let tax = this.taxes.find(taxes =&gt; taxes.id == this.selectedTax);     
              if(tax)
              {
                  let newPrice = this.getTax(tax, this.roomtype_net_price);
                  console.log(newPrice);
                  this.taxPrice = newPrice;
              }
              else
              {
                this.taxPrice = 0;
              }
             }
            else
            {
              this.roomtype_net_price = 0
            }
              this.$emit("total-price", this.roomtype_net_price, this.taxPrice);      
            },
              changePrice(price) {
              this.roomType.base_price = price
              this.totalPrice(price);   
            }
  </code></pre>
  
  <p><strong>RoomDetails.vue</strong></p>
  
  <pre><code>&lt;tr v-for="roomType in roomTypes" :key="roomType.id"&gt;
          &lt;select-room-details
            :room-type="roomType"
            :taxes="taxes"
            :guest-check-in="guestCheckIn"
            :guest-check-out="guestCheckOut"
            v-on:select-room="selectRoom"
            v-on:total-price="calculateTotalPrice"
          &gt;&lt;/select-room-details&gt;
        &lt;/tr&gt;
  </code></pre>
  
  <p><strong>Method in RoomDetails.vue</strong></p>
  
  <pre><code> calculateTotalPrice(total, tax) {
        this.totalPrice = 0;
        this.totalTax = tax;
        this.totalPrice = this.totalPrice + total + tax;
      }
    }
  </code></pre>
  
  <p><strong>Sum is displayed here</strong></p>
  
  <pre><code>  &lt;td class="display-2"&gt;Sum: {{this.totalPrice}}&lt;/td&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/34H7a.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/34H7a.jpg" alt="enter image description here"></a></p>