我有一个输入:
<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 : ''"
/>
要删除 disabled 属性,您应该将其值设置为 false
。这需要是 false
的布尔值,而不是字符串 'false'
。
因此,如果 validated
的值为 1 或 0,则根据该值有条件地设置 disabled
属性。例如:
<input type="text" :disabled="validated == 1">
这是一个例子。
var app = new Vue({ el: '#app', data: { disabled: 0 } });
{{ $data }}
您可以拥有一个计算属性,该属性根据您需要的任何标准返回一个布尔值。
<input type="text" :disabled=isDisabled>
然后将您的逻辑放入计算属性中...
computed: {
isDisabled() {
// evaluate whatever you need to determine disabled here...
return this.form.validated;
}
}
Data
中定义的 HTML 中调用 isDisabled()
。
不难,看看这个。
<button @click="disabled = !disabled">Toggle Enable</button>
<input type="text" id="name" class="form-control" name="name" v-model="form.name" :disabled="disabled">
您的 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'
在您检查的值前加上 +
例如 <input :disabled="!!+validated"/>
这个将一串数字转换为数字,例如
+1 = 1 +'1' = 1
就像 David Morrow 上面所说的那样,您可以将条件逻辑放入一个方法中 - 这会为您提供更多可读代码 - 只需从方法中返回您希望检查的条件即可。
您可以在 vue.js 中操作 :disabled
属性。
它将接受一个布尔值,如果它是真的,那么输入被禁用,否则它将被启用......
例如,在您的情况下,结构如下所示:
<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>
您可以创建一个计算属性并根据其值启用/禁用任何表单类型。
<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;
}
}
})
切换输入的禁用属性非常复杂。对我来说,问题是双重的:
(1) 记住:输入的“禁用”属性不是布尔属性。该属性的存在意味着输入被禁用。
但是,Vue.js 的创建者已经准备好了……https://v2.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://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>
可以使用这个添加条件。
<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>
这也将起作用
<input type="text" id="name" class="form-control" name="name" v-model="form.name" :disabled="!validated">
如果您使用 SFC 并希望为这种情况提供一个最小的示例,那么您可以使用它:
导出默认 { data() { return { disableInput: false } },方法:{ toggleInput() { this.disableInput = !this.disableInput } } }
点击 button
触发 toggleInput
功能,并简单地用 this.disableInput = !this.disableInput
切换 disableInput
的状态。
我的解决方案:
// 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';
}
}
如果 isButtonDisabled 的值为 null、undefined 或 false,则 disabled 属性甚至不会包含在呈现的元素中。
请记住,在撰写本文时,据我所知,ES6 Sets/Maps 似乎没有反应。
我们可以使用 Vue 3
有条件地禁用输入,方法是将 disabled 属性设置为我们想要 disable
input
时的条件
例如,我们可以写:
<template>
<input :disabled="disabled" />
<button @click="disabled = !disabled">toggle disable</button>
</template>
<script>
export default {
name: "App",
data() {
return {
disabled: false,
};
},
};
</script>
true
或false