CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-component
Mohamed Omar
Mohamed Omar

Reputation: 21

Vue.js how can i sum values i print

I work on a commercial site and when the customer orders a product, I do the following: Printing the price of the product first for example $ 60 Then if the customer chooses the fast shipping service, I print the value of the express shipping service, for example, $20. How do I addition and print numbers in Total?

<ul>
    <li>Price : {{product.product_price}} Doller</li>
    <li v-if="orderData.fastDelivry">Fast delivry : {{delevryValue}} Doller</li>
    <li>Total : </li>
</ul>

Upvotes: 2

Views: 103

Answers (1)

Nikola Pavicevic
Nikola Pavicevic

Reputation: 23490

Try like following snippet:

new Vue({
  el: '#demo',
  data() {
    return {
      product: {
        name: 'prod 1',
        product_price: 15
      },
      orderData: {
        fastDelivry: false
      },
      delevryValue: 5
    }
  },
  computed: {
    total() {
      return (this.orderData.fastDelivry ? this.product.product_price + this.delevryValue :  this.product.product_price)
    }
  },
  methods: {
    setDelivery() {
      this.orderData.fastDelivry = !this.orderData.fastDelivry
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<ul>
    <li>Price : {{product.product_price}} Doller</li>
    <input type="checkbox" @click="setDelivery" /> fast delivery 
    <li v-if="orderData.fastDelivry">Fast delivry : {{delevryValue}} Doller</li>
    <li>Total : {{ total }}</li>
</ul>
</div>

Upvotes: 2

Related Questions