我有一个输入:
<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 : ''"
/>
你可以在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>
若要移除禁用道具,应将其值设置为false。这需要是false的布尔值,而不是字符串'false'。
因此,如果已验证的值是1或0,则根据该值有条件地设置禁用道具。例如:
<input type="text" :disabled="validated == 1">
这里有一个例子。
var app = new Vue({
埃尔:“#应用”,
数据:{
禁用:0
}
});
< script src = " https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js " > < /脚本>
< div id = "应用" >
<button @click="disabled = (disabled + 1) % 2">Toggle Enable</button> . </button @click="disabled = (disabled + 1) % 2
<input type="text":disabled="disabled == 1">
<pre>{{$data}}</pre> . {{$data}
< / div >