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>
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>