Как рассчитать скидку в Vue JS

Question

У меня есть простая база данных с некоторыми полями. поля следующие: id, product_name, original_price, discount поле скидки в процентах. Я получаю все данные один раз с помощью Axios и рендеринг на странице, используя v-for код:

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

Здесь я хочу отобразить рассчитанную цену после скидки. я мог бы создать метод в экземпляре Vue как это:

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

Если я создаю этот метод, как я могу вызвать этот метод при рендеринге, пожалуйста, помогите.

Answer 1

Вы не можете использовать вычисляемое свойство, потому что вам нужен расчет для каждого продукта в продуктах, а вычисляемое свойство не может принимать никаких параметров.
Вы можете использовать метод вместо:

<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

вы можете использовать фильтр

var app = new Vue({
  el: '#app',
  data () {
    return {
      list: [{
        product_name: 'name',
        original_price: 300,
        discount: 8.5
      },{
        product_name: 'name',
        original_price: 1200,
        discount: 7.5
      },{
        product_name: 'name',
        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.5.16/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>priceAfterDiscount: {{item.original_price | priceAfterDiscount(item.discount)}}</li>
    </ul>
</div>

Answer 3

Выполните этот расчет на стороне сервера и просто назначьте after_discount в качестве окончательной скидки для каждого продукта, и вы можете отобразить скидку, как показано ниже.

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

Надеюсь, это поможет.