有条件地禁用输入(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;
},
..

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

要删除禁用的道具，您应该将其值设置为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>

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

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

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

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

不难，看看这个

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

jsfiddle

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

它将接受一个布尔值，如果为true，那么输入将被禁用，否则它将被启用…

像下面这样的结构，例如:

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

通过JavaScript有条件地禁用输入元素Expression
可以有条件地禁用内联输入元素使用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>

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

<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'前置您正在使用+(例如<input :disabled="!!+validated"/>)检查的值，这会将数字字符串转换为数字，例如

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

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

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

vue js

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

要切换输入的disabled属性非常复杂。这个问题对我来说是双重的:

(1)记住:在HTML中输入是'禁用'的;属性是不是布尔属性。
存在属性意味着输入被禁用。

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

属性

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

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

在某些情况下，组件不会立即重新呈现。它将在下一个"滴答"中更新。

From Vue.js docs: https://v2.vuejs.org/v2/guide/reactivity.html

解决方案是使用:

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

Fuller示例工作流:

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

可以使用这个添加条件。

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

如果您使用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切换。

这也将工作

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

My Solution:

//App.vue Template:

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

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

手册:vue v2vue v3

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

请记住，据我所知，在撰写本文时，ES6 set/Maps似乎没有响应

我们可以在Vue 3中有条件地禁用输入，当我们想要disable时，将禁用道具设置为input

例如:

<template>
  <input :disabled="disabled" />
  <button @click="disabled = !disabled">toggle disable</button>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      disabled: false,
    };
  },
};
</script>

有一个新发布的东西叫做inert，它实际上使它被浏览器忽略。

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

这里是用于测试目的的游乐场。

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

通过JavaScript有条件地禁用输入元素Expression

相关内容

最新更新

热门标签：