时间戳

首页 > 解决方案 > 如何通过修改另一个字段的值来计算一个字段的值，反之亦然

javascript - 如何通过修改另一个字段的值来计算一个字段的值，反之亦然

问题描述

我有两个领域

<input v-model="amount_ttc" @change="setAmountHtva">
<input v-model="amount_htva" @change="setAmountTtc">

我的数据：

export default {
  data () {
    return {
      amount_ttc: 0,
      amount_htva: 0,
      vat: 21
    }
  },
  methods: {
    setAmountHtva () {
        this.amount_htva = parseFloat(this.amount_ttc / (1 + this.vat / 100)).toFixed(2)
    },
    setAmountTtc () {
        this.amount_ttc = parseFloat(this.amount_htva * (1 + this.vat / 100)).toFixed(2)
    }
  }
}

如果我填写该amount_ttc字段，我希望amount_htva自动计算该字段。
如果我填写该amount_htva字段，我希望amount_ttc自动计算该字段。

我在做什么是行不通的。

我收到一条错误消息，通知我无限循环。

我认为这是因为当我修改字段 A 时，我计算了字段 B（它发生了变化，所以我再次计算字段 A）

我不知道如何得到我想要的。

标签： javascriptvue.js

解决方案

我刚刚在 codepen.io 中测试了这些代码片段，效果很好。没有任何错误。

HTML 代码：

<div id="app">
  <form>
  <input v-model="amount_ttc" @change="setAmountHtva">
  <input v-model="amount_htva" @change="setAmountTtc">
  </form>
</div>

JS代码（你应该在js设置中链接vuejs v2）：

new Vue({
  el: '#app',
  data: {
      amount_ttc: 0,
      amount_htva: 0,
      vat: 21
  },
  methods: {
    setAmountHtva () {
        this.amount_htva = parseFloat(this.amount_ttc / (1 + this.vat / 100)).toFixed(2)
    },
    setAmountTtc () {
        this.amount_ttc = parseFloat(this.amount_htva * (1 + this.vat / 100)).toFixed(2)
    }
  }
})

推荐阅读