CODEWITHSUNDEEP
vue.js
Mary
Mary

Reputation: 1125

In Vue.js, why aren't my buttons appropriately disabled?

My code is as follows:

https://jsfiddle.net/2g7m5qy5/139/

The initial dummy buttons are disabled. When the input value changes, the 'Dummy' button is enabled.

Suppose I have the following sequence of events:

  1. I change 'a' to 'abc'
  2. The 'Dummy' button is then enabled
  3. I press 'Submit' in the top row
  4. The 'Dummy' button is still enabled
  5. In the top row, I press space then backspace, so that the input is still 'abc'
  6. Note now that the 'Dummy' button is disabled

What I really want is for the Dummy button to be disabled at step (4) above, straight after 'Submit' is pressed.

For some reason, no change is firing after this line of code:

that.initialValues[index] = value;

How do I get my 'Dummy' button to be disabled straight after 'Submit' is pressed?

Upvotes: 0

Views: 44

Answers (1)

Thomas Ferro
Thomas Ferro

Reputation: 2442

This issue is about reactivity.

Changing an element from your array will not make the computed based on this array re-render.

You have multiple options here :

Re-assign the array

In your submit method, you can create a copy of the array, change the element and then re-assign the array in your Vue instance :

submit: function(value, index) {
  setTimeout(() => {
    const initialValues = [ ...this.initialValues ]
    initialValues[index] = value;
    this.initialValues = initialValues
  }, 100);
}

Using $set

You can also use the $set method to set your new value and make the computed re-render :

submit: function(value, index) {
  setTimeout(() => {
    this.$set(this.initialValues, index, value)
  }, 100);
}

Upvotes: 1

Related Questions