How to disable button if multiple form inputs do not change in Vue.js

Question

I have multiple forms created from API. For each form, I need to check if the value of inputs is changed or not; so that I can make the button disabled or enabled.

So, I tried to create a flag: isChanged: false, so that, I can make the button like this:

<v-btn
  :disabled="!isChanged"
>
  Save
</v-btn>

But, as I have multiple forms, I need to create multiple flags maybe, but I don't understand how to create multiple flags dynamically for each form.

Also, I have a Save All button which may require a new flag such as isChangedAny: false to detect if any of the multiple forms changed or not.

If any of the form inputs change, that button needs to be enabled from disabled. But, most importantly, I can't figure out how to create a method to detect if the form inputs change or not. How can I do that?

CodePen Demo

Igor Moraru · Accepted Answer · 2021-12-02 18:23:57Z

1

You could create individual watchers for each form after you get the data, and store the id of changed forms:

  data: () => ({
    items: [],
    changed: []
  }),
  mounted () {
    this.getData()
    // The following code should be run in a callback when the getData() is asynchronous. 
    this.items.forEach((_, index) => {
      this.$watch(['items', index].join('.'), 
        {
          deep: true, 
          handler: (newVal, oldVal) => {
            this.changed.push(newVal.id)
          }
        }
      );
    });
  }

Then check against the changed array. If a specific id is in that array, activate the form. If the length of changed array is greater than 0, activate saveAll.

Here is the working codepen

edited Dec 2, 2021 at 18:23

answered Dec 2, 2021 at 18:16

Igor Moraru

7,7491 gold badge15 silver badges28 bronze badges

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

Comments

Jason Landbridge · Accepted Answer · 2021-12-02 17:44:16Z

1

You essentially have two options on how to solve this:

You listen to the @input event on a form field, once that fires you set a hasChanged to true. This is the easy solution but it will not work if the user changes the value back to its original, because then the hasChanged is still true and the form is still savable.
Create a copy of the original form data in the mounted() hook and compare the current input with the original input through a computed property. This will work the best but might be a bit more difficult to implement.

answered Dec 2, 2021 at 17:44

Jason Landbridge

1,47218 silver badges25 bronze badges

Collectives™ on Stack Overflow

How to disable button if multiple form inputs do not change in Vue.js

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related