javascript - 需要值(减去值)来影响另一个输入的值

Question

我正在尝试计算 money_due 的值，如果存款输入持有一个值，则从中减去存款的值(value)。到目前为止，它添加得很好，但当我清空值时它并没有删除它。

      <div class="col-sm-12 col-md-6 col-lg-4">
        <div class="form-group">
          <label>Total Sum Due <span class="note">2</span></label>
          <input type="text" class="form-control" v-model="document.money_due" placeholder="">
        </div>
      </div>
      <div class="col-sm-12 col-md-6 col-lg-4">
        <div class="form-group">
          <label>Deposit <span class="note">2</span></label>
          <input type="text" class="form-control" @change="hasDeposit" v-model="document.deposit" placeholder="">
        </div>
      </div>

    data() {
      return {
        now: new Date().toISOString(),
        document: {
          deposit: '',
          money_due: '',
        }
      }
    },

this.document.deposit = this.listing.price;
this.document.money_due = this.document.last_month + this.document.security_deposit,

    methods: {
      hasDeposit() {
        if(this.document.deposit == '') {
          return this.document.money_due = this.document.money_due + this.document.deposit;
         } else {
           return this.document.money_due = this.document.money_due;
        }
      },

    mounted() {
      this.hasDeposit();
    },

Answer 1

抱歉，不太清楚您想用您的代码实现什么。

我创建了一个片段，其中我尝试对存款 和money_due 关系进行建模。

new Vue({
  el: "#app",
  data: {
    listing: {
      price: 10
    },
    document: {
      last_month: -20,
      security_deposit: 10,
      deposit: 0,
      money_due: 0
    },
  },
  computed: {
    hasDeposit() {
      return Number(this.document.money_due) + Number(this.document.deposit)
    }
  },
  mounted() {
    this.document.deposit = this.listing.price;
    this.document.money_due = this.document.last_month + this.document.security_deposit
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <label>Total Sum Due <span class="note">2</span>
  <input type="text" class="form-control" v-model="hasDeposit" placeholder=""></label><br />

  <label>Deposit <span class="note">2</span>
  <input type="text" class="form-control" v-model="document.deposit" placeholder=""></label>
</div>

1. 我模拟了您代码中引用的数据

2. 将 hasDeposit() 从 method 移动到 computed (它只返回一个计算值)

3. 更改了mounted

中的内容

我希望这就是您想要的。