我有一个输入:

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

当前回答

切换输入的disabled属性非常复杂。对我来说,问题有两方面:

(1)记住:输入的“disabled”属性不是一个布尔属性。 属性的存在意味着输入被禁用。

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

(感谢@connexo…如何在vuejs输入文本中添加禁用属性?)

(2)此外,还有一个DOM时间重新渲染的问题,我有。当我试图切换回来时,DOM没有更新。

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

来自Vue.js文档:https://v2.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>

其他回答

不难,看看这个。

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

斯菲德尔

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

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

试试这个

 <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;
    }
  }
})

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

它将接受一个布尔值,如果它为真,则输入被禁用,否则将启用…

以你的例子为例,结构如下:

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

同时阅读下面这篇文章:

通过JavaScript有条件地禁用输入元素 你可以有条件地inline禁用输入元素 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>

有一种新发布的叫做惰性的东西,它实际上是让浏览器忽略它。

<template>
  <input 
    type="text" 
    id="name" 
    class="form-control" 
    name="name"  
    :inert="isItInert"
  />
</template>

<script setup>
const isItInert = true
</script>

这里是测试用的操场。