有条件地禁用输入（Vue.js）

Question

我有一个意见：

<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;
},
..

validated 是boolean，它可以是0 或1，但无论数据库中存储什么值，我的输入总是被禁用。

如果false，我需要禁用输入，否则应该启用和编辑。

更新：

这样做总是启用输入（无论我在数据库中有 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 : ''"
/>

Answer 1

如果您使用 SFC 并希望为此案例提供一个最小示例，您可以使用它：

export default {
  data() {
return {
  disableInput: false
}
  },
  methods: {
toggleInput() {
  this.disableInput = !this.disableInput
}
  }
}

<template>
  <div>
<input type="text" :disabled="disableInput">
<button @click="toggleInput">Toggle Input</button>
  </div>
</template>

点击button会触发toggleInput函数，并简单地将disableInput的状态切换为this.disableInput = !this.disableInput。

Answer 2

要删除 disabled 属性，您应该将其值设置为 false。这需要是 false 的布尔值，而不是字符串 'false'。

因此，如果 validated 的值是 1 或 0，则根据该值有条件地设置 disabled 属性。例如：

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

这是一个例子。

var app = new Vue({
  el: '#app',

  data: {
    disabled: 0
  }
}); 

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click="disabled = (disabled + 1) % 2">Toggle Enable</button>
  <input type="text" :disabled="disabled == 1">
    
  <pre>{{ $data }}</pre>
</div>

Answer 3

我的解决方案：

// App.vue 模板：

<button
            type="submit"
            class="disabled:opacity-50 w-full px-3 py-4 text-white bg-indigo-500 rounded-md focus:bg-indigo-600 focus:outline-none"
            :disabled="isButtonDisabled()"
            @click="sendIdentity()"
          >
            <span v-if="MYVARIABLE > 0"> Add {{ MYVARIABLE }}</span>
            <span v-else-if="MYVARIABLE == 0">Alternative text if you like</span>
            <span v-else>Alternative text if you like</span>
          </button>

样式基于Tailwind

// App.vue 脚本：

 (...)
  methods: {
   isButtonDisabled(){
    return this.MYVARIABLE >= 0 ? undefined: 'disabled';
   }
 }

手册： vue v2 vue v3

如果 isButtonDisabled 的值为 null、undefined 或 false，则 disabled 属性甚至不会包含在渲染中 元素。

Answer 4

这也行

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

Answer 5

试试这个

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

vue js

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

Answer 6

请记住，在撰写本文时，据我所知，ES6 Sets/Maps 似乎不是反应式的。

Answer 7

切换输入的 disabled 属性非常复杂。我的问题是双重的：

(1)记住：输入的“禁用”属性是不是布尔值属性。
仅存在属性意味着输入被禁用。

然而，Vue.js 的创造者已经准备好了…… https://vuejs.org/v2/guide/syntax.html#Attributes

（感谢@connexo 提供这个...How to add disabled attribute in input text in vuejs?）

(2) 此外，我遇到了 DOM 时间重新渲染问题。当我尝试切换回来时，DOM 没有更新。

在某些情况下，“组件不会立即重新渲染。它将在下一个'tick'中更新。”

来自 Vue.js 文档：https://vuejs.org/v2/guide/reactivity.html

解决方案是使用：

this.$nextTick(()=>{
    this.disableInputBool = true
})

更完整的示例工作流程：

<div @click="allowInputOverwrite">
    <input
        type="text"
        :disabled="disableInputBool">
</div>

<button @click="disallowInputOverwrite">
    press me (do stuff in method, then disable input bool again)
</button>

<script>

export default {
  data() {
    return {
      disableInputBool: true
    }
  },
  methods: {
    allowInputOverwrite(){
      this.disableInputBool = false
    },
    disallowInputOverwrite(){
      // accomplish other stuff here.
      this.$nextTick(()=>{
        this.disableInputBool = true
      })
    }
  }

}
</script>

Answer 8

您可以在 vue.js 中操作:disabled 属性。

它将接受一个布尔值，如果它是true，则输入被禁用，否则它将被启用...

在您的情况下，结构如下所示：

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

请阅读以下内容：

通过 JavaScript 有条件地禁用输入元素 表达式

您可以有条件地禁用内联输入元素 使用 JavaScript 表达式。这种紧凑的方法提供了一个快速 应用简单条件逻辑的方法。例如，如果您只需要 要检查密码的长度，您可以考虑做一些事情 像这样。

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

您可以创建一个计算属性并根据其值启用/禁用任何表单类型。

<template>
    <button class="btn btn-default" :disabled="clickable">Click me</button>
</template>
<script>
     export default{
          computed: {
              clickable() {
                  // if something
                  return true;
              }
          }
     }
</script>

Answer 10

可以使用这个添加条件。

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

您的 disabled 属性需要一个布尔值：

<input :disabled="validated" />

注意我只检查了validated - 这应该像0 is falsey ...例如

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

1 is in fact considered to be true

要格外小心，请尝试： <input :disabled="!!validated" />

这种双重否定将0 或1 的falsey 或truthy 值变为false 或true

不相信我？进入您的控制台并输入!!0 或!!1 :-)

此外，要确保您的号码 1 或 0 肯定是作为数字而不是字符串 '1' 或 '0' 在您检查的值前面加上 + 例如 @ 987654340@ 这会将一串数字变成一个数字，例如

+1 = 1 +'1' = 1 就像 David Morrow 上面所说的那样，您可以将条件逻辑放入一个方法中 - 这会给您更多可读代码 - 只需从方法中返回您希望检查的条件即可。

Answer 12

你可以有一个计算属性，它根据你需要的任何标准返回一个布尔值。

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

然后将您的逻辑放入计算属性中...

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

Answer 13

不难，检查一下。

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

jsfiddle