javascript - 如何在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

您不能使用计算属性，因为您需要对 products 中的每个产品进行计算，并且计算属性不能采用任何参数。
您可以使用方法代替:

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