CODEWITHSUNDEEP
javascriptvue.js
Rick
Rick

Reputation: 43

v-on:change event is not fired when javascript is used to increase value is Vue

I am building a retirement income calculator for work and started using Vue for the first time to integrate two-way data binding. I have developed most of the functionality of the calculator, however I am having some trouble implementing a couple business rules into the calculator due to unfamiliarity with Vue. The code I have completed can be viewed at https://jsfiddle.net/9f542pqs/. Here are the business rules that I need to apply:

I have tried to attach a v-on:change listener to the input used to store the "contribute until" age and then do a check of the business rules to set booleans that control the disabled state of the increase/decrease buttons, but the event never fires for me. How can I implement such functionality to disable the increase/decrease buttons when the value of the "contribute until" age is updated?

Upvotes: 1

Views: 4266

Answers (1)

Roy J
Roy J

Reputation: 43881

The change event is only going to fire when the input's value is directly edited. It will not fire when it is changed by your dropdown or +/- buttons.

The good news is, you don't really want a change event from the DOM. You've bound the value to a variable, and what you want to notice is when that variable's value changes. That's what watch is for. You'll do something like:

...(in your Vue spec)...
watch: {
  age: function (newValue, oldValue) {
    validate(newValue);
  }
},
...

(Also note: since you're using v-model="age", you don't need value="{{age}}")

I notice that you're applying Vue separately to various DOM elements. You're likely going to want those various items to be aware of each other. You probably ought to be making one call to Vue for the whole application, and possibly having each of those sub-units be represented by a component.

Think of Vue not as a way of adding two-way binding, but as a way of segregating the DOM from your programming. You deal with application state purely as data, and Vue makes sure the DOM reflects that state.

Upvotes: 5

Related Questions