代码之家  ›  专栏  ›  技术社区  ›  kabugh

计算财产-净价和每件物品的价格

  •  0
  • kabugh  · 技术社区  · 6 年前

    我有一系列的项目,金额和价格(税前)。我想计算每件商品的净价和价格。我还有一个允许显示货币的过滤器,希望在创建的computed属性旁边显示该过滤器。计算属性和在其旁边显示筛选器不起作用。我能做些什么让他们工作? JSFiddle here

    HTML格式:

    <table>
        <thead>
          <tr class="table-head">
            <th v-for="item in tableHead">{{ item.name }} <span>{{ item.desc }}</span></th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(element, index) in amount">
            <td>{{ element.amount }}</td>
            <td>
              {{ priceNet }}
    
            </td>
            <td>
              {{ element.price | curr }}
              {{ pricePerItem }}
            </td>
          </tr>
        </tbody>
      </table>
    

    Vue JS公司:

    new Vue({
      el: "#app",
      data: {
        tableHead: [
          { name: 'amount', desc: '' },
          { name: 'price', desc: '(net)' },
          { name: 'price', desc: '(pre-tax)' }
        ],
        amount: [
          { amount: 100, price: 80.61 },
          { amount: 250, price: 72.10 },
          { amount: 500, price: 79.62 },
          { amount: 1000, price: 100.20 },
          { amount: 2500, price: 147.60 },
          { amount: 5000, price: 232.56 }
        ]
      },
      computed: {
        priceNet() {
          this.amount.forEach((element) => {
            let net = (element.price / 1.23);
            return net;
          })
        },
        pricePerItem() {
          this.amount.forEach((element) => {
            let priceP = element.price / element.amount;
            return priceP;
          })
        }
      },
      filters: {
        curr: (value) => {
          return `${value.toFixed(2)} euro`
        }
      }
    })
    
    1 回复  |  直到 6 年前
        1
  •  2
  •   connexo    5 年前

    而不是 computed 你想要的 methods 以下内容:

    methods: {
      priceNet(price) {
        return price / 1.23
      },
      pricePerItem(price, amount) {
        return price / amount
      }
    },
    

    然后,在html中更新绑定:

    <tr v-for="(element, index) in amount">
        <td>{{ element.amount }}</td>
        <td>{{ priceNet(element.price) | curr }}</td>
        <td>
          {{ element.price | curr }}
          {{ pricePerItem(element.price, element.amount) | curr }}
        </td>
    </tr>
    

    更新小提琴:

    https://jsfiddle.net/75Lk2tpe/1/