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

小开

最佳答案

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

小开

不难，看看这个。

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

jsfiddle

小开

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

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

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

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

小开

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

<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" /> < / p >

这个双重否定将0或1的falsey或truthy值转换为false或true

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

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

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

小开

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

它将接受一个布尔值，如果它是真正的，则输入被禁用，否则将启用…

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

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

同时阅读下面这篇文章:

通过JavaScript有条件禁用输入元素表达式
可以有条件地inline禁用输入元素 JavaScript表达式。这种紧凑的方法提供了一个快速的应用简单条件逻辑的方法。例如，如果你只需要要检查密码的长度，您可以考虑采取一些措施这样的。< / p >

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

小开

可以使用此添加条件。

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

小开

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

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

小开

切换输入的< >强禁用< / >强属性非常复杂。对我来说，问题有两方面:

(1）记住:输入的"disabled"属性是不是布尔值属性。
属性的存在意味着输入被禁用。

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

(感谢@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>

小开

请记住，ES6集/地图似乎没有反应，据我所知，在写作的时候。

小开

试试这个

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

小开

这个也可以

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

小开

我的解决方案:

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

样式基于顺风

// App.vue 脚本:

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

< p >手册: vue v2 vue v3 < / p >

如果isButtonDisabled的值为null, undefined或false，则isButtonDisabled的值为0 Disabled属性甚至不会被包含在被呈现的对象中 < / p >元素。

小开

如果你使用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函数，并简单地用this.disableInput = !this.disableInput切换disableInput的状态。

小开

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

例如，我们可以这样写:

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

这里是操场上用于测试目的。

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

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

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