Vue jS: input auto filled-CodePudding

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"  placeholder=" total price" required />
<br />
<input type="number" v-model="instPaid"                                                                 placeholder=" paid " required />
<input type="number"   placeholder=" percenatge"                                                                  required />

CodePudding user response：

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>