vue.js有条件地禁用输入 [英] vue.js disable input conditionally

问题描述

我有一个输入

 < input type =textid =nameclass =form-control name =namev-model =form.name：disabled =validated？：disabled> 
  

在我的Vue.js组件中，我确实有

  .. 
 .. 
 ready（）{
 this.form.name = this.store.name; 
 this.form.validated = this.store.validated; 
}，
 .. 
  

验证过的 布尔来 0 或 1 ，但无论数据库中存储了什么值，我的输入始终都是禁用的。

如果输入为false，则需要禁用输入，否则可编辑

更新：

总是启用输入（不管我在数据库中有0还是1）

 < input type =textid =nameclass =form-controlname =namev- model =form.name：disabled =validated？：disabled> 
  

始终禁用输入（不管我有0还是1在数据库中）

 < input type =textid =nameclass =form-controlname = namev-model =form.name：disabled =validated？disabled：''> 
  

解决方案

到 false 。这需要是 false 的布尔值，而不是字符串'false'。因此，如果验证的值是1或0，则有条件地设置已禁用 prop基于该值。例如：

 < input type =text：disabled =validated == 1> 
  

下面是一个例子。

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 do have,

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

validated being boolean comes 0 or 1, but no matter what is value stored in database, my input is always disabled

I need input to be disabled if false, otherwise, editable

Update:

doing this always enables the input ( no matter I have 0 or 1 in 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 database)

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

解决方案

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.

这篇关于vue.js有条件地禁用输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！