Disable input conditionally (Vue.js)

ghz 8months ago ⋅ 141 views

I have an input:

<input 
  type="text" 
  id="name" 
  class="form-control" 
  name="name"  
  v-model="form.name" 
  :disabled="validated ? '' : disabled"
/>

and in my Vue.js component, I have:

..
..
ready() {
  this.form.name = this.store.name;
  this.form.validated = this.store.validated;
},
..

validated being a boolean, it can be either 0 or 1, but no matter what value is stored in the database, my input is always disabled.

I need the input to be disabled if false, otherwise it should be enabled and editable.

Update:

Doing this always enables the input (no matter I have 0 or 1 in the database):

<input 
  type="text" 
  id="name" 
  class="form-control" 
  name="name" 
  v-model="form.name" 
  :disabled="validated ? '' : disabled"
/>

Doing this always disabled the input (no matter I have 0 or 1 in the database):

<input 
  type="text" 
  id="name" 
  class="form-control" 
  name="name" 
  v-model="form.name" 
  :disabled="validated ? disabled : ''"
/>

Answers

It seems like there might be a misunderstanding in how the :disabled attribute is being bound in your Vue.js component. Let's clarify how the :disabled attribute should be set based on your requirement:

If validated is a boolean value indicating whether the input should be disabled or not, you can directly bind it to the :disabled attribute like this:

<input 
  type="text" 
  id="name" 
  class="form-control" 
  name="name" 
  v-model="form.name" 
  :disabled="!validated"
/>

In this case, if validated is true, the input will be enabled, and if validated is false, the input will be disabled.

However, if validated is a truthy or falsy value (0 or 1 as you mentioned), and you want to enable/disable the input based on that, you need to adjust the logic in your template accordingly. You can use a ternary operator or a computed property to achieve this:

Using a ternary operator:

<input 
  type="text" 
  id="name" 
  class="form-control" 
  name="name" 
  v-model="form.name" 
  :disabled="validated === 0 ? true : false"
/>

Using a computed property:

computed: {
  isDisabled() {
    return this.validated === 0;
  }
}

<input 
  type="text" 
  id="name" 
  class="form-control" 
  name="name" 
  v-model="form.name" 
  :disabled="isDisabled"
/>

In both cases, the input will be disabled if validated is 0, and enabled otherwise. Make sure that validated is correctly set in your Vue component data or store. If it's not working as expected, double-check the value of validated in your ready hook to ensure it's being set correctly.

#vue.js