I have this code in my vue app:

This is the button of the form I need to disable

<button class="btn btn-primary text-uppercase" id="nextButton" @click.prevent="showNext(2)" :disabled="!disableButton">
  Next
</button>

And this is the logic I want to use

    puted: {
        disableButton(){
            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
        }
    }

I've created a simple stor to persist the data across the ponents, inside each ponent I'm importing the store file and inside the data function I'm also importing

import { reactive } from 'vue'

const store = reactive({...})

I need to disable the next button until the user insert all the required informations, I'm trying with a puted but without success, everytime the button will stay enabled or remain disabled also if I've inserted all the infromations. How I can solve this problem?

I have this code in my vue app:

This is the button of the form I need to disable

<button class="btn btn-primary text-uppercase" id="nextButton" @click.prevent="showNext(2)" :disabled="!disableButton">
  Next
</button>

And this is the logic I want to use

    puted: {
        disableButton(){
            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
        }
    }

I've created a simple stor to persist the data across the ponents, inside each ponent I'm importing the store file and inside the data function I'm also importing

import { reactive } from 'vue'

const store = reactive({...})

I need to disable the next button until the user insert all the required informations, I'm trying with a puted but without success, everytime the button will stay enabled or remain disabled also if I've inserted all the infromations. How I can solve this problem?

• javascript
• vue.js

• 1 Not sur, because you don't have a worked example where i can see the problem. But you say name or surname or email .... You have to say i disable the button if i don't have name and surname .... So in first step you have to replace your || by && – Raphael Rlt Commented Mar 6, 2023 at 10:10
• @RaphaelRlt I've tried with the && operator but when all the informations are inserted the button will stay disabled. – OHICT Commented Mar 6, 2023 at 11:27
• I post a answer because i can't write proper code ir – Raphael Rlt Commented Mar 6, 2023 at 12:36

4 Answers 4

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 puted shorter:

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

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

To respond to your ment 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:

 puted: {
        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 puted 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",
    }
  },
  puted: {
    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./vue@3"></script>