Vue jS: input auto filled

Question

In my Vue JS code below i have input total price and two inputs paid and percentage, i wanted to do an algorithm that what ever user wrote inside paid input an auto percentage should be filled in percentage input and ofc this percentage is from total price input, also when user write in percentage input the paid should be auto filled and so on.

Is there a way to do this in Vue js?

P.S: I wrote v-model=instpaid and v-model=instprice that posts data to API

<input type="number" v-model="instPrice" class="price-input mt-3" placeholder=" total price" required />
<br />
<input type="number" v-model="instPaid" class="price-input mt-3"                                                                placeholder=" paid " required />
<input type="number"  class="price-input mt-3" placeholder=" percenatge"                                                                  required />

Nikola Pavicevic · Accepted Answer · 2022-01-04 17:22:08Z

2

Maybe something like following snippet:

new Vue({
  el: "#demo",
  data() {
    return {
      instPrice: 0,
      instPaid: 0,
      pct: 0
    }
  },
  methods: {
    calc(pct) {
      pct === true ?
        this.instPaid = (this.instPrice / 100 * this.pct).toFixed(2)
      :
        this.pct = (this.instPaid / this.instPrice * 100).toFixed(2)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <input type="number" v-model="instPrice" placeholder=" total price" required />
  <br />
  <input type="number" v-model="instPaid" placeholder=" paid" @keyup="calc(false)" required />
  <input type="number" placeholder=" percenatge" @keyup="calc(true)" v-model="pct" required />
</div>

answered Jan 4, 2022 at 17:22

Nikola Pavicevic

23.6k9 gold badges30 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue jS: input auto filled

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related