In my Vue project, I have created a multi-page questionnaire using the v-show directive within a container called RiskAssessmentTest.vue.
To handle loading questionnaire drafts, I have a component named RiskAssessmentDrafts.vue, which has the following structure:
<template>
<div>
<button type="button" class="btn btn-success btn-block rounded" @click="loadDraft(draft)">Continue</button>
</div>
</template>
<script>
import Progress from 'easy-circular-progress';
import moment from 'moment';
export default {
components: {
Progress
},
data() {
return {
moment: moment
};
},
props: ['drafts'],
methods: {
loadDraft(draft) {
this.$emit('load-draft', draft);
},
}
};
</script>
<style></style>
The above component emits the loadDraft() method to the parent component as shown below:
<template>
<risk-assessment-drafts :drafts="drafts" @load-draft="loadDraftAnswers" />
</template
The loadDraftAnswers() method fetches and loads the questionnaire data for each respective question in the child component.
/**
* Load any draft answers into each question page.
*
* @param {*} $draft
*/
async loadDraftAnswers($draft) {
this.$refs.q1.loadDraftAnswers($draft['test_id'], 0);
this.$refs.q2.loadDraftAnswers($draft['test_id'], 1);
this.$refs.q3.loadDraftAnswers($draft['test_id'], 2);
this.$refs.q4.loadDraftAnswers($draft['test_id'], 3);
this.$refs.q5.loadDraftAnswers($draft['test_id'], 4);
},
After checking the Chrome dev tools, it seems like the data is initially set, but upon further inspection, everything becomes unset when clicking on the component again.
This behavior raises questions about data retention in Vue components, especially when using directives like v-if. Is there a way to ensure that the component retains its data consistently?
You can view a video demonstration of the issue here: