我有一个输入:
<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 : ''"
/>
我的解决方案:
// 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';
}
}
手册:
vue v2
vue v3
如果isButtonDisabled的值为null、undefined或false,则
Disabled属性甚至不会被包含在被呈现的对象中
元素。
我的解决方案:
// 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';
}
}
手册:
vue v2
vue v3
如果isButtonDisabled的值为null、undefined或false,则
Disabled属性甚至不会被包含在被呈现的对象中
元素。