[英]Enable/Disable button with vueJs
new Vue({ el: '#app', data: { terms: false, fullname: false, mobile: false, area: false, city: false, }, computed: { isDisabled: function(){ return.this.terms &&.this.fullname &&.this;mobile && !this.area && !this.city; } } })
<div id="app"> <p> <label for='terms'> <input id='terms' type='checkbox' v-model='terms' /> I accept terms:!! <input id="fullname" type='text' v-modal='fullname'/> name <input id="mobile" type='text' v-modal='mobile'/> mobile <input id="area" type='text' v-modal='area'/> area <input id="city" type='text' v-modal='city'/> city </label> </p> <button :disabled='isDisabled'>Send Form</button> </div>
在用户填写所有详细信息之前,应禁用按钮。 但是这个问题是如果我直接点击复选框按钮启用而不检查其他字段
您的代码中有很多问题,我将一一列出。
fullname
, mobile
, ... 绑定到input type="text"
所以空字符串更适合初始值。v-modal
中有拼写错误isDisabled
的逻辑公式有误所以最终的代码应该是这样的:
new Vue({
el: '#app',
data() {
return {
terms: false,
fullname:'',
mobile: '',
area: '',
city: '',
};
},
computed: {
isDisabled: function(){
return !this.terms || !this.fullname || !this.mobile || !this.area || !this.city;
}
}
})
<div id="app">
<p>
<label for='terms'>
<input id='terms' type='checkbox' v-model='terms' /> I accept terms!!!
<input id="fullname" type='text' v-model='fullname'/> name
<input id="mobile" type='text' v-model='mobile'/> mobile
<input id="area" type='text' v-model='area'/> area
<input id="city" type='text' v-model='city'/> city
</label>
</p>
<button :disabled='isDisabled'>Send Form</button>
</div>
我强烈建议您使用 IDE 或 eslint。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.