Enable/Disable button with vueJs

Question

new Vue({
  el: '#app',
  data: {
    terms: false,
    fullname: false,
    mobile: false,
    area: false,
    city: false,
  },
  computed: {
    isDisabled: function(){
        return !this.terms && !this.fullname && !this.mobile && !this.area && !this.city;
    }
  }
})

<div id="app">
  <p>
    <label for='terms'>
      <input id='terms' type='checkbox' v-model='terms' /> I accept terms!!!
      <input id="fullname" type='text' v-modal='fullname'/> name
      <input id="mobile" type='text' v-modal='mobile'/> mobile
       <input id="area" type='text' v-modal='area'/> area
      <input id="city" type='text' v-modal='city'/> city
    </label>
    
  </p>
  <button :disabled='isDisabled'>Send Form</button>
</div>

Until user fill all the details, button should be disabled. But Issue with this is if i click on checkbox directly button is enabling without checking for other fields

What is v-modal. I think you want v-model

Ohgodwhy
– Ohgodwhy

2021-03-10 06:38:25 +00:00
Commented Mar 10, 2021 at 6:38 — Ohgodwhy
– Ohgodwhy, Commented Mar 10, 2021 at 6:38

sosmii · Accepted Answer · 2021-03-10 06:57:17Z

2

There are many problems in your code and i will list them one by one.

data property should be a function.
fullname , mobile , ... are bound to input type="text" so empty string is better for initial value.
there are typos in your v-modal
there is a mistake in your logical formula for isDisabled

so the final code should be like this:

new Vue({
  el: '#app',
  data() {
    return {
      terms: false,
      fullname:'',
      mobile: '',
      area: '',
      city: '',
    };
  },
  computed: {
    isDisabled: function(){
        return !this.terms || !this.fullname || !this.mobile || !this.area || !this.city;
    }
  }
})

<div id="app">
  <p>
    <label for='terms'>
      <input id='terms' type='checkbox' v-model='terms' /> I accept terms!!!
      <input id="fullname" type='text' v-model='fullname'/> name
      <input id="mobile" type='text' v-model='mobile'/> mobile
       <input id="area" type='text' v-model='area'/> area
      <input id="city" type='text' v-model='city'/> city
    </label>
    
  </p>
  <button :disabled='isDisabled'>Send Form</button>
</div>

I highly recommend you to use IDE or eslint.

answered Mar 10, 2021 at 6:57

sosmii

2921 silver badge7 bronze badges

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

1 Comment

T dhanunjay Over a year ago

computed: { isDisabled: function(){ return !this.terms || !this.fullname.maxLength...................; } Can i use maxLength for data properties, So that untill some length only button will be enabled

Collectives™ on Stack Overflow

Enable/Disable button with vueJs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related