javascript - 如何为元素提供 V 模型

Question

我使用 vue.js 从 JSON 数据动态创建输入字段。我面临的问题是给他们动态 v-model

我在做的是

new Vue({
  el: '#app',
  data() {
    return {
      totalAmt: 500,
      paymentMode: [{
        "PAYMENTCODE": "SW",
        "PAYMENTNAME": "Swiggy"
      }, {
        "PAYMENTCODE": "BB",
        "PAYMENTNAME": "uber Eats"
      }, {
        "PAYMENTCODE": "WE",
        "PAYMENTNAME": "Zomato"
      }]
    }
  },
  computed: {
    balAmt() {
      return 0 - this.totalAmt
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div>
    <label>Total Amt</label>
    <input type="text" v-model="totalAmt">
  </div>
  <div v-for="mode in paymentMode" :key="mode.PAYMENTCODE" class="form-group col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
    <label>{{mode.PAYMENTNAME}}</label>
    <input type="text">
  </div>
  <div>
    <label>Bal Amt</label>
    <input type="text" :value="balAmt">
  </div>
</div>

我想做的是:

两个字段 Total Amt 和 Bal Amt 我的总金额有一些值，在 Bal Amt 中，我有相同的总金额值，但就像 - Total Amt=500 然后 Bal-Amt=-500 这是页面加载的时间

现在有一些动态输入字段，这里有三个，所以当我在一个 input field 中键入假设 50 时，就像在 Swiggy 中一样，我想做 500-50 即Total Amt-字段金额

对于静态字段，我可以很容易地做到这一点，但在这里我有动态字段，我该如何做到这一点。

Answer 1

类似于totalAmt，为每个输入添加一个v-model，并将其设置为"mode.Amount"。然后在 balAmt 中，计算每个输入的总和并从 totalAmt

中减去它

new Vue({
  el: '#app',
  data() {
    return {
      totalAmt: 500,
      paymentMode: [{
        "PAYMENTCODE": "SW",
        "PAYMENTNAME": "Swiggy"
      }, {
        "PAYMENTCODE": "BB",
        "PAYMENTNAME": "uber Eats"
      }, {
        "PAYMENTCODE": "WE",
        "PAYMENTNAME": "Zomato"
      }]
    }
  },
  computed: {
    balAmt() {
      // sum of inputs of paymentMode
      const sum = this.paymentMode.reduce((a, b) => a + (+b.Amount || 0), 0);
      return sum - this.totalAmt;
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div>
    <label>Total Amt</label>
    <input type="text" v-model="totalAmt">
  </div>
  <div v-for="mode in paymentMode" :key="mode.PAYMENTCODE" class="form-group col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
    <label>{{mode.PAYMENTNAME}}</label>
    <input type="text" v-model="mode.Amount">
  </div>
  <div>
    <label>Bal Amt</label>
    <input type="text" :value="balAmt">
  </div>
</div>