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>
Until user fill all the details, button should be disabled. But Issue with this is if i click on checkbox directly button is enabling without checking for other fields
There are many problems in your code and i will list them one by one.
fullname
, mobile
, ... are bound to input type="text"
so empty string is better for initial value. v-modal
isDisabled
so the final code should be like this:
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>
I highly recommend you to use IDE or eslint.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.