有条件地禁用输入(Vue.js)

我有一个输入:

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

在Vue.js组件中，我有:

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

验证是一个布尔值，它可以是0或1，但无论数据库中存储的是什么值，我的输入总是禁用的。

我需要输入被禁用，如果为假，否则它应该是启用和可编辑的。

更新:

这样做总是启用输入(无论我在数据库中有0或1):

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

这样做总是禁用输入(无论我有0或1在数据库):

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

当前回答

这个也可以

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

2020-11-16 17:37:51

其他回答

您可以有一个计算属性，它根据所需的任何条件返回一个布尔值。

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

然后把你的逻辑放到一个计算属性中…

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

2017-06-07 22:13:15

禁用属性需要一个布尔值:

<输入:disabled=“验证”/>

注意我如何只检查是否验证-这应该工作为0是假的

0在JS中被认为是假的(如undefined或null)

1实际上被认为是正确的

要格外小心，试试: <禁用输入:= " ! !验证" / >

这种双重否定将0或1的假值或真值转换为假值或真值

不相信我?进入控制台，输入!!0或!!1: -)

此外，为了确保你的数字1或0绝对是一个数字，而不是字符串'1'或'0'，你正在检查的值前面有一个+ e.g. <input:disabled="!! "+validated"/>将一个数字字符串转换为数字

+1 = 1 +'1' = 1 就像David Morrow上面说的，你可以把你的条件逻辑放到一个方法中——这给了你更可读的代码——只是从方法中返回你想检查的条件。

2017-12-28 16:26:28

试试这个

 <div id="app">
  <p>
    <label for='terms'>
      <input id='terms' type='checkbox' v-model='terms' /> Click me to enable
    </label>
  </p>
  <input :disabled='isDisabled'></input>
</div>

js角度

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

2019-05-02 06:12:21

不难，看看这个。

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

斯菲德尔

2016-12-24 12:31:22

可以使用此添加条件。

  <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>

2018-06-13 03:22:43

有条件地禁用输入(Vue.js)

推荐文章

最新文章

标签