Vue.js 表单计算属性获取不到值:应纳税所得额计算的解决方案

根据提供的代码,主要问题可能是表单中的数据没有正确绑定到form对象上,导致计算属性acTaxableincome没有正确的数据来源。以下是可能的解决方法:

  1. 确保表单中的输入字段(例如input、select等)正确绑定到form对象的属性上。例如,使用v-model指令将输入字段与form对象中的相应属性绑定起来。

  2. 确保form对象在组件的data选项中正确初始化,并且所有相关的属性都被正确定义。

  3. 确保在计算属性中引用的所有属性都在form对象中正确定义。

  4. 检查是否存在其他相关的代码错误或逻辑错误,可能会影响到表单数据的获取和计算。

如果上述解决方法仍然不能解决问题,请提供更多详细的代码和错误信息,以便我可以更好地帮助您解决问题。

示例代码:

<template>
  <div>
    <el-form :model="form" ref="form">
      <el-form-item
        label="一次性补偿收入:"
        prop="disposableCompensationIncome"
        style="width: 290px"
      >
        <el-input v-model="form.disposableCompensationIncome"></el-input>
      </el-form-item>
      <!-- 其他表单项 -->
      <el-form-item
        label="应纳税额:"
        prop="acTaxPiPersonCalculationSchedule.acTaxableAmount"
        style="width: 290px"
      >
        {{ acTaxableincome }}
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        // 准予扣除的捐赠额
        deductionAllowedDonate: 0,
        // 一次性补偿收入
        disposableCompensationIncome: 0,
        // 年均减除费用
        averageAnnualDeductionCost: 0,
        // 分均年度数
        shareYearDegree: null,
        // 	减除费用
        deductCost: null,
        companyId: null,
        personId: null,
        reportingPeriodDate: null,
        other: null,
        taxExemptIncome: 0,
        // 备注
        remark: null,
        // 小计
        subtotal: 0,
        // 减免税额
        reductionTaxAmount: 0,
        // companyId: null,
        // incomeReportingCode: null,
        // 所得期间起
        incomePeriodDateStart: null,
        // 所得期间至
        incomePeriodDateEnd: null,
        // 应纳税额
        acTaxPiPersonVo: {
          // 人员id
          personId: null,
          // 姓名
          name: "",
          // 证件号码
          identificationNum: "",
          // 证件类型
          identificationType: "",
          // 工号
          employeeId: "",
          // 其他
        },
        acTaxPiPersonCalculationSchedule: {
          // 	应纳税额
          acTaxableAmount: 0,
          // 	减免税额
          acTaxSavings: 0,
          // 应纳税所得额
          acTaxableIncome: 0,
          // 已预缴税额
          prepaidTaxAmount: 0,
          // 税率/预扣率
          taxRate: 0,
          // 速算扣除数
          quickCalculationDeduction: 0,
          // 应补(退)税额
          payableTaxAmount: 0,
          // 累计应扣缴税额
          acDeductiblePaymentAmount: 0,
          // 	年均应纳税所得额(提前退休一次性补贴表)
          annualTaxableIncome: 0,
        },
      },
    };
  },
  computed: {
    acTaxableincome() {
      const {
        disposableCompensationIncome,
        taxExemptIncome,
        subtotal,
        deductionAllowedDonate,
      } = this.form;
      const taxableAmount =
        disposableCompensationIncome -
        taxExemptIncome -
        subtotal -
        deductionAllowedDonate;
      return taxableAmount >= 0 ? taxableAmount : 0.0;
    },
  },
};
</script>

注意:

  • 以上代码示例中,v-model指令将input字段与form.disposableCompensationIncome属性绑定,确保表单数据能够正确地更新到form对象中。
  • 确保所有相关的属性都在form对象中正确定义,并且在计算属性中正确引用。
  • 仔细检查代码中的其他逻辑,确保没有错误或遗漏。

希望以上内容能帮助您解决问题,如果您还有其他问题,请随时提问。

Vue.js 表单计算属性获取不到值:应纳税所得额计算的解决方案

原文地址: https://www.cveoy.top/t/topic/padT 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录