[Vuejs]-Vuejs – disable button until all input fields are completed

Without working example is hard to be 100% sure, but as far as I see you have issue in logic.

You have:

:disabled="!disableButton"

and you should have

:disabled="disableButton"

You could make the condition inside the computed shorter:

 computed: {
        enableButton(){
            return Object.values(this.store).every(v=>!!v)
        }
    }

and :disabled="!enableButton", this makes sense

To respond to your comment in more clear way.

You need to check the different value, but in this context i presume your value is filled with some string.
You just need to do something like this:

 computed: {
        fieldIsFilled(){
            return this.store.name && this.store.surname && this.store.email && this.store.phone && this.store.invalidPhone && this.store.pdv && this.store.desiredDate && this.store.desiredHour && this.store.privacyFlag
        }
    }

And attach this to the button like this:

If the fields is filled the computed is true, so we reverse the result
to disabled the button when the field is not filled.

<button :disabled="!fieldIsFilled">
  Next
</button>

For informatin i think you have some trouble and don’t understand what you done because you have a error in your code, watch the line :

!this.store.name || !this.store.surname || !this.store.email || !this.store.phone || this.store.invalidPhone || !this.store.pdv || !this.store.desiredDate || !this.store.desiredHour || !this.store.privacyFlag

You have this.store.invalidPhone without the exclamation point, not sur but it’s maybe not what you want too.

I created a demo that will check if any of the provided fields is empty then make the button disabled otherwise enable it. Try to empty any field and you should see that button will be disabled.

You can try matching your approach with this one.

const App = {
  name: "App",
  data() {
    return {
      name: "name",
      surname: "surname",
      email: "email",
      phone: "phone",
      invalidPhone: "invalidPhone",
      pdv: "pdv",
      desiredDate: "desiredDate",
      desiredHour: "desiredHour",
      privacyFlag: "privacyFlag",
    }
  },
  computed: {
    shouldDiabled() {
      let emptyField = ["name", "surname", "email", "phone", "invalidPhone", "pdv", "desiredDate", "desiredHour", "privacyFlag"].find(prop => !this[prop])
      return emptyField;
    }
  }

};

Vue.createApp(App).mount('#app');

<div id="app">
  <input v-model="name">
  <input v-model="surname">
  <input v-model="email">
  <input v-model="phone">
  <input v-model="invalidPhone">
  <input v-model="pdv">
  <input v-model="desiredDate">
  <input v-model="desiredHour">
  <input v-model="privacyFlag">
  <button @click.prevent="showNext(2)" :disabled="shouldDiabled">
  Next
  </button>
</div>
<script src="https://unpkg.com/vue@3"></script>