Activate/Deactivate toggle using Vue.js

Question

Activate/Deactivate toggle using Vue.js

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 all user details are filled, the button will remain disabled. But there's an issue where clicking on the checkbox directly enables the button without checking for other fields.

javascript vue.js

Answer 1

Answer №1

Your code has several issues that need to be addressed:

The data property should be a function.
Make sure fullname, mobile, etc., are bound to input type="text" with an empty string as the initial value.
Check for typos in your v-modal.
There is an error in your logical formula for isDisabled.

To fix these problems, update your code 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 suggest using an IDE or eslint for better code quality.

Answer 2

Your code has several issues that need to be addressed:

The data property should be a function.
Make sure fullname, mobile, etc., are bound to input type="text" with an empty string as the initial value.
Check for typos in your v-modal.
There is an error in your logical formula for isDisabled.

To fix these problems, update your code 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 suggest using an IDE or eslint for better code quality.

Activate/Deactivate toggle using Vue.js

Answer №1

Similar questions

Listen to music on an Android device without disturbing anyone using an iPhone

Marked checkboxes and Node.js

Adding Node Modules during the setup of an ElectronJS application

What is the process for implementing a Content Security Policy to enable the loading of external JS files from a CDN in ExpressJS?

What distinguishes defining a function through a prototype versus as a class property?

What are the steps to compile Sencha Touch using sencha-touch.jsb3?

Utilize data obtained from an ajax request located in a separate file, then apply it within a local function

Tips for effectively parsing extensive nested JSON structures?

Button click event is not being triggered by Ajax rendering

What steps can I take to resolve the Angular JS error message: [$injector:unpr]?

What steps do I need to take to ensure NextJS stores my edits in VSCode?

The for loop does not pause until the ajax response is received

Error encountered in Three JS Drag Controls: Unable to assign value to property 'x' as it is undefined

Using Ajax for updating table content on a JSP webpage section

"Encountering errors during npm installation due to a failed preinstall

Vue - Additional loading may be required to manage the output of these loaders

Execute tests on changing files using cypress.io

"When the value is false, use the Vue binding to apply a specific

Using the same function in two different locations will only work for one instance

There are multiple sets of radio buttons within nested ng-repeats, but only the final group displays the selected value