[Vuejs]-How to make an interdepending form input with props in vue?

by

3👍

✅

I don’t know the details of how your version of value.sync works so im gonna pretend that you are using regular v-model (with value prop and input event to propagate changes).

To trigger recalculation only on user input, instead of using watchers you should trigger them in on-change listeners, for example.:

<input
  :value="form.amount"
  @input="onAmountChange"
/>

methods: {
  onAmountChange (value) {
    this.form.amount = value;
    ... // recalculation logic
  }
}

Or even go one step further to make your template cleaner, and do it using computed properties

<input v-model="formAmount"/>

computed: {
  formAmount: {
    get () {
      return this.form.amount
    },
    set (value) {
      this.form.amount = value;
      ... // recalculation logic
    }
  }
}
👤Kamil Bęben

Leave a comment