How to split a form in tabs, and get a validation state of each from parent component ? I used this approach but $refs is undefined at this moment, I can't understand why
"TypeError: Cannot read properties of undefined (reading 'isValidTab')"
Any other approach or good pratices to do that ?
App.vue
<template>
<form>
<userTab v-model="user" ref="userTab" />
<input type="submit" :disabled="!areValidTabs" />
</form>
</template>
<script>
import userTab from "./components/Tab1";
export default {
components: {
userTab,
},
computed: {
areValidTabs() {
return this.$refs.userTab.isValidTab;
}
},
data: function () {
return {
user: {
email: null,
},
};
},
};
</script>
Tab1.vue
<template>
<div>
<input v-model="user.email" placeholder="username" />
</div>
</template>
<script>
export default {
model: {
prop: "user",
event: "change",
},
props: {
user: {
type: Object,
},
},
computed: {
isValidTab() {
return this.user.email !== "";
},
},
data: () => ({}),
};
</script>
https://codesandbox.io/s/quizzical-voice-c8ih9?file=/index.js