<div id="app" class="m-3">
<form :class="formClass">
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email">
</div>
</form>
<x-button
text="Submit"
v-on:submit-form="formClass = 'loading'"></x-button>
</div>form {
position: relative;
}
form.loading ::before {
position: absolute;
width: 100%;
height: 100%;
content: 'Loading...';
background: rgba(25, 25, 25, 0.5);
color: white;
padding: 20px;
}
Vue.component('x-button', {
props: ['text'],
template: `
<button
type="submit"
class="btn btn-primary"
v-on:click="$emit('submit-form')">
{{ text }}
</button>
`
});
var vue = new Vue({
el: "#app",
data: {
formClass: ''
}
})