Enable/Disable button with Vue
Enable and Disable button when accept terms with checkbox
HTML
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<p>
<input class="input-mobile-email" type="text" placeholder="Your email" id="email" v-model="email" name="email" />
</p>
<button :disabled='isDisabled'>Send Form</button>
</div>
JavaScript
new Vue({
el: '#app',
data: {
email: ''
},
computed: {
isEmailValid() {
return '/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/'.test(this.email)
},
isDisabled: function(){
return !this.email;
}
}
})