Is there a way to modify the color of a button when clicked? Once the user has filled in all the fields and checked the checkbox, the button's color should change.
new Vue({
el: '#app',
data() {
return {
terms: false,
fullname:'',
maxfullname: 10,
mobile: '',
maxmobile: 10,
area: '',
maxarea: 12,
city: '',
maxcity: 12,
};
},
computed: {
isDisabled: function(){
return !this.terms || (this.fullname.length < this.max) || (this.mobile.length < this.maxmobile)
|| (this.area.length < this.maxarea) || (this.city.length < this.maxcity);
}
}
}).register-button {
width: 160px;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 16px;
font-weight: 600;
color: #fff;
background-color: #ee1d24;
border-radius: 10px;
margin-top: 15px;
padding: 0 20px;
cursor: pointer;
opacity: 0.5;
display: flex;
justify-content: center;
align-items: center;
outline: none;
border: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<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' :maxlength="maxfullname"/> name
<input id="mobile" type='text' v-model='mobile'/ :maxlength="maxmobile"> mobile
<input id="area" type='text' v-model='area' :maxlength="maxarea"/> area
<input id="city" type='text' v-model='city':maxlength="maxcity"/> city
</label>
</p>
<button class="register-button" :disabled='isDisabled'>Send Form</button>
</div>Is there a way to modify the color of a button when clicked? Once the user has filled in all the fields and checked the checkbox, the button's color should change.