CODEWITHSUNDEEP
javascriptvue.js
manish thakur
manish thakur

Reputation: 820

How to give V-model to elements

I have dynamically creating input fields from JSON data using vue.js. The issue I am facing I to give them dynamic v-model

What I am doing is

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>

What I am trying to do is:

Two fields Total Amt and Bal Amt I have in total amount there is some value and in Bal Amt, I have the same value of total amt but as - like Total Amt=500 then Bal-Amt=-500 this is when page loads

Now there are some dynamic input field here there are three, so when I type suppose 50 in one input field say as in Swiggy I want to do 500-50 i.e Total Amt-the field amount

For static fields, I can easily do this but here I am having dynamic fields how can I do this.

Upvotes: 1

Views: 130

Answers (2)

adiga
adiga

Reputation: 35202

Similar to totalAmt, add a v-model to each input and set it to "mode.Amount". Then inside balAmt, calculate the sum of each input and subtract it from 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>

Upvotes: 3

rcbgalido
rcbgalido

Reputation: 534

new Vue({
  el: '#app',
  data() {
    return {
      totalAmt: 500,
      paymentMode: [{
        "PAYMENTCODE": "SW",
        "PAYMENTNAME": "Swiggy",
        amount: 0
      }, {
        "PAYMENTCODE": "BB",
        "PAYMENTNAME": "uber Eats",
        amount: 0,
      }, {
        "PAYMENTCODE": "WE",
        "PAYMENTNAME": "Zomato",
        amount: 0
      }]
    }
  },
  computed: {
    otherAmt() {
      let amt = 0
      this.paymentMode.forEach(mode => {
        amt += Number(mode.amount)
      })
      return amt
    },
    balAmt() {
      return 0 - (this.totalAmt - this.otherAmt)
    }
  }
})
<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>

Upvotes: 1

Related Questions