Question

我的用例是这样的，

用户可以输入工作时间和费用，

基于这些值，我必须进行计算以获得最终值，

和 vat和payrate是预定义的常量。

pay_amount =小时*付款率

tax_amount = pay_amount *增值税/ 100

总计=工资额+税额+（费用+（费用*增值税/ 100））

这是我的代码。但是它没有按预期运行。

<template>
  <v-app>
    <v-container>
      <v-layout>
        <v-flex>
          <v-text-field
          label="Hours"
          v-model="hours">
          </v-text-field>

          <v-text-field
          label="expences"
          v-model="expences">
          </v-text-field>

          <h1>Pay amount = {{hours}} * {{payrate}} = {{pay_amount}}</h1>
          <h1>Vat amount = {{pay_amount}} * {{vat}} = {{vat_amount}}</h1>
          <h1>{{total}}</h1>
        </v-flex>
      </v-layout>
    </v-container>



  </v-app>
</template>

<script>
export default {
  computed: {
    pay_amount() {
      return this.hours * this.payrate;
    },
    vat_amount() {
      return this.pay_amount * this.vat / 100;
    },
    total() {
      return (
        this.vat_amount +
        this.pay_amount +
        this.expences * this.vat / 100 +
        this.expences
      );
    }
  },
  name: "App",
  data() {
    return {
      hours: "",
      payrate: 166,
      vat: 5,
      expences: "",
      expences_cal: ""
    };
  }
};
</script>

我的代码有什么问题？

任何帮助，谢谢。

Answer 1

您的数据属性的起始值应为0，而不是空字符串，因为您正在使用数字进行计算。

此外，您可以利用v-model number modifier来自动将值转换为数字。

例如v-model.number="yourDataProp"

Vue.js如何将观察者和计算的属性应用于复杂的计算

1 个答案: