In my template form, each question is contained within a child component structure as shown below:
<template>
<question1
@display-answer-1="setAnswer1"
/>
<!-- other child components here... -->
</template>
<script>
import Question1 from '...path...';
export default{
components: { Question1 },
data() {
answer1: ''
},
methods: {
setAnswer1(answer1) {
this.answer1 = answer1;
}
}
};
The structure of the child component is as follows:
<template>
<input type="text" v-model="answer1"/>
<div>
<button
type="button"
@click="saveQ2"
>Save
</button>
</div>
</template>
<script>
export default {
data() {
return {
answer1: ''
};
},
methods: {
saveQ2() {
const answer1 = this.answer1;
this.$emit('display-answer-1', answer1);
}
}
};
Although the current code functions correctly, it requires adding a "Save" button for each question to transfer data from the child to the parent. Are there any alternative solutions to avoid placing a save button under each question?