Calculating discounts using Vue.js: A step-by-step guide

Question

Calculating discounts using Vue.js: A step-by-step guide

I am working with a basic database that contains several fields including id, product_name, original_price, and discount. The discount field is specified in percentage format. To populate all the data at once using Axios and display it on the page using v-for I have utilized the following code:

<ul v-for="product in products">
   <li>@{{product.product_name}}</li>
   <li>@{{product.original_price}}</li>
   <li>@{{product.discount}}</li>
</ul>

Now, I am looking to show the calculated price after applying the discount. To achieve this, I am considering creating a method in my Vue instance as shown below:

      calculateDiscount: function(orig_price, discount){
                         this.discount_amt = discount/100*orig_price;
                         return this.after_discount = orig_price - this.discount_amt;
    }

If I implement this method, how can I invoke it during rendering? Any assistance would be greatly appreciated.

javascript vue.js vuejs2

Answer 1

Answer №1

Instead of using a computed property which cannot take any parameters, you can utilize a method to perform calculations on each product in the products array.

<ul v-for="product in products">
  <li>@{{product.product_name}}</li>
  <li>@{{product.original_price}}</li>
  <li>@{{product.discount}}</li>
  <li>@{{ discountedPrice(product) }}</li>
</ul>


methods: {
  discountedPrice(product) {
    return product.original_price - (product.original_price *(product.discount)/100)
  }
}

Answer 2

Instead of using a computed property which cannot take any parameters, you can utilize a method to perform calculations on each product in the products array.

<ul v-for="product in products">
  <li>@{{product.product_name}}</li>
  <li>@{{product.original_price}}</li>
  <li>@{{product.discount}}</li>
  <li>@{{ discountedPrice(product) }}</li>
</ul>


methods: {
  discountedPrice(product) {
    return product.original_price - (product.original_price *(product.discount)/100)
  }
}

Answer 3

Answer №2

Perform the calculation on your server side and set the after_discount value as the final discount for each product. You can then display the discount using the following code snippet.


   <ul v-for="product in products">
       <li>@{{product.product_name}}</li>
       <li>@{{product.original_price}}</li>
       <li>@{{product.discount}}</li>
       <li>@{{product.after_discount}}</li>
   </ul>

I hope this information is useful to you.

Answer 4

Perform the calculation on your server side and set the after_discount value as the final discount for each product. You can then display the discount using the following code snippet.


   <ul v-for="product in products">
       <li>@{{product.product_name}}</li>
       <li>@{{product.original_price}}</li>
       <li>@{{product.discount}}</li>
       <li>@{{product.after_discount}}</li>
   </ul>

I hope this information is useful to you.

Answer 5

Answer №3

Utilize the filter functionality in Vue.js

var app = new Vue({
  el: '#app',
  data () {
    return {
      list: [{
        product_name: 'Shoes',
        original_price: 300,
        discount: 8.5
      },{
        product_name: 'Jacket',
        original_price: 1200,
        discount: 7.5
      },{
        product_name: 'Hat',
        original_price: 3000,
        discount: 5.5
      }]
    }
  },
  filters: {
    priceAfterDiscount (v,discount) {
      return (v * discount / 10).toFixed(2);
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
    <ul v-for="item of list">
      <li>Product: {{item.product_name}}</li>
      <li>Price: ${{item.original_price}}</li>
      <li>Discount: {{item.discount}}%</li>
      <li>Price After Discount: ${{item.original_price | priceAfterDiscount(item.discount)}}</li>
    </ul>
</div>

Answer 6

Utilize the filter functionality in Vue.js

var app = new Vue({
  el: '#app',
  data () {
    return {
      list: [{
        product_name: 'Shoes',
        original_price: 300,
        discount: 8.5
      },{
        product_name: 'Jacket',
        original_price: 1200,
        discount: 7.5
      },{
        product_name: 'Hat',
        original_price: 3000,
        discount: 5.5
      }]
    }
  },
  filters: {
    priceAfterDiscount (v,discount) {
      return (v * discount / 10).toFixed(2);
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
    <ul v-for="item of list">
      <li>Product: {{item.product_name}}</li>
      <li>Price: ${{item.original_price}}</li>
      <li>Discount: {{item.discount}}%</li>
      <li>Price After Discount: ${{item.original_price | priceAfterDiscount(item.discount)}}</li>
    </ul>
</div>

Calculating discounts using Vue.js: A step-by-step guide

Answer №1

Answer №2

Answer №3

Similar questions

How can I retrieve the parent scope in an Angular UI nested named view?

Error: The React Hook "useX" should not be invoked at the top level of the code

The anchor events in the DataTable are not responding when clicked, resulting in a failure to load resources

Setting Authorization with username, password, and domain in Angular 2 HTTP Request

Launch a "mini" web browser from Outlook

Struggling to render the template inside a .vue file in a Vue.js + TypeScript project?

"Looping through elements with ng-repeat does not seem to refresh

jQuery show/hide function malfunctioning

Switching video sources with jQuery and HTML5 can be achieved by clicking on an

What could be causing the error message "userID is not defined" to appear?

Picture cannot reemerge with SetTimeout

Exploring the functionality of uiRouter using the requirejs framework

Load JavaScript only when the lightbox appears

Using Jquery Chosen Plugin to Dynamically Populate One Chosen Selection Based on Another

Unable to add information to data property in Vue.js

Error 404 encountered while attempting to GET on a socket.io server within a Django template

Is there a way to trim the current shapes in three.js?

Ways to showcase Switch/Case in two separate drop-down menus

The organizational structure of data in MongoDB for posts, comments, saved content, and likes

Apply active class to a link element in React JS