I created a unique component named HobbyForm, which consists of a simple form with two controls - a checkbox and an input field. This particular component is being utilized within a parent component called Content, alongside similar 'form' components.
<template>
<form>
<div class="row align-items-center">
<div class="col-1">
<Checkbox id="isHobbyActive" :binary="true" v-model="isActive"/>
</div>
<div class="col-5">
<InputText id="hobby" placeholder="Hobby" type="text" autocomplete="off" v-model="hobby"/>
</div>
</div>
</form>
</template>
<script>
export default {
name: 'HobbyForm',
data() {
return {
hobby: {
isActive: false,
hobby: null
}
}
},
}
</script>
The structure of my Content component looks like this:
<template>
<language-form></language-form>
<hobby-form v-for="(hobbie, index) in hobbies" :key="index" v-bind="hobbies[index]"></hobby-form>
<Button label="Add Hobby" @click="addHobby"></Button>
</template>
<script>
export default {
name: "Content",
components: {
LanguageForm,
HobbyForm
},
data() {
return {
language: '',
hobbies: [
{
isActive: false,
hobby: null
}
]
};
},
methods: {
addHobby() {
this.hobbies.push({
isActive: false,
hobby: null
});
}
},
};
</script>
The main goal is to be able to include more instances of the HobbyForm component in order to append additional hobby records to the hobby data property. However, I am unsure of how to manage and retrieve these values from my parent without manually triggering an emit event from my child components to update the data in the parent component.
Could you provide guidance on accessing the data of my child components from the parent and incorporating it into my array?