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作为a 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

要删除已禁用的prop,您应将其值设置为false.这需要是布尔值false,而不是字符串'false'.

因此,如果值为validated1或0,则disabled根据该值有条件地设置prop.例如:

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

这是一个例子.

Answer 2

你可以有一个计算属性,它返回一个布尔值,取决于你需要的标准.

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

然后把你的逻辑放在计算属性中......

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

Answer 3

不难,检查一下.

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

的jsfiddle

Answer 4

您的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" />

这种双重否定转动falsey或truthy价值0或1到false或true

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

此外,为了确保您的号码1或0绝对是作为数字而不是字符串'1'或'0'预先挂起您正在检查的值,+例如,<input :disabled="!!+validated"/>这会将数字的字符串转换为数字,例如

+1 = 1 +'1' = 1 就像David Morrow上面所说的那样,你可以把你的条件逻辑放到一个方法中 - 这会给你更多可读的代码 - 只需返回你要检查的条件的方法.

Answer 5

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

它将接受一个布尔值,如果这是真的,那么输入被禁用,否则将被启用...

在你的情况下像下面这样结构的东西,例如:

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

尝试这个

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

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

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

Answer 8

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

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

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

（感谢@connexo 对此...如何在 vuejs 的输入文本中添加禁用属性？）

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

在某些情况下，“组件不会立即重新渲染。它会在下一个‘滴答’中更新。”

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