vue.js disable input conditionally

Question

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 : ''">

Answer 1

You can manipulate :disabled attribute in vue.js.

It will accept a boolean, if it's true, then the input gets disabled, otherwise it will be enabled...

Something like structured like below in your case for example:

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

Also read this below:

Conditionally Disabling Input Elements via JavaScript Expression

You can conditionally disable input elements inline with a JavaScript expression. This compact approach provides a quick way to apply simple conditional logic. For example, if you only needed to check the length of the password, you may consider doing something like this.

<h3>Change Your Password</h3>
<div class="form-group">
  <label for="newPassword">Please choose a new password</label>
  <input type="password" class="form-control" id="newPassword" placeholder="Password" v-model="newPassword">
</div>

<div class="form-group">
  <label for="confirmPassword">Please confirm your new password</label>
  <input type="password" class="form-control" id="confirmPassword" placeholder="Password" v-model="confirmPassword" v-bind:disabled="newPassword.length === 0 ? true : false">
</div>

Answer 2

you could have a computed property that returns a boolean dependent on whatever criteria you need.

<input type="text" :disabled=isDisabled>

then put your logic in a computed property...

computed: {
  isDisabled() {
    // evaluate whatever you need to determine disabled here...
    return this.form.validated;
  }
}

Answer 3

Your disabled attribute requires a boolean value:

<input :disabled="validated" />

Notice how i've only checked if validated - This should work as 0 is falsey ...e.g

0 is considered to be false in JS (like undefined or null)

1 is in fact considered to be true

To be extra careful try: <input :disabled="!!validated" />

This double negation turns the falsey or truthy value of 0 or 1 to false or true

don't believe me? go into your console and type !!0 or !!1 :-)

Also, to make sure your number 1 or 0 are definitely coming through as a Number and not the String '1' or '0' pre-pend the value you are checking with a + e.g <input :disabled="!!+validated"/> this turns a string of a number into a Number e.g

+1 = 1 +'1' = 1 Like David Morrow said above you could put your conditional logic into a method - this gives you more readable code - just return out of the method the condition you wish to check.

Answer 4

To remove the disabled prop, you should set its value to false. This needs to be the boolean value for false, not the string 'false'.

So, if the value for validated is either a 1 or a 0, then conditionally set the disabled prop based off that value. E.g.:

<input type="text" :disabled="validated == 1">

Here is an example.

Answer 5

Can use this add condition.

  <el-form-item :label="Amount ($)" style="width:100%"  >
            <template slot-scope="scoped">
            <el-input-number v-model="listQuery.refAmount" :disabled="(rowData.status !== 1 ) === true" ></el-input-number>
            </template>
          </el-form-item>

Answer 6

Not difficult, check this.

<button @click="disabled = !disabled">Toggle Enable</button>
<input type="text" id="name" class="form-control" name="name"  v-model="form.name" :disabled="disabled">

jsfiddle