0๐
You have to emit an event in parent component when the form submitted and in parent component validate the inputs.
InfoItemComponent:
<template>
<form action="" @submit.prevent="formSubmit">
<div class="account-container_right__infoInput">
<!-- <input type="text"> -->
<slot></slot>
</div>
<div class="account-container_right__infoButtons">
<button type="submit" class="btn btn--primary">save</button>
<button class="btn btn--default" @click.prevent="cancelEdit">cancel</button>
</div>
</form>
</template>
<script>
export default {
//other code..
methods: {
formSubmit() {
this.$emit('formSubmited')
}
}
//other code..
}
</script>
how to use InfoItemComponent
<info-item @formSubmited="formSubmit">
<input type="text" v-validate="'required'" >
</info-item>
<script>
export default {
//other code
methods: {
formSubmit() {
//here validate your fields
}
}
//other code
}
</script>
Source:stackexchange.com