Vue child component data properties always reset.

In Vue I have made a multipage questionnaire using v-show with the make app container being called RiskAssessmentTest.vue.

I have a component to load questionnaire drafts called RiskAssessmentDrafts.vue that looks like this

<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 loadDraft() method is called in the parent component like this

<template>
<risk-assessment-drafts :drafts="drafts" @load-draft="loadDraftAnswers" />
</template

The loadDraftAnswers() methods grabs the data for the questionnaire and loads it into 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);
},

I don't know if its good or bad practice but I then call the loadDraftAnswers() method in the child component.

/**
 * Method called from child that loads into respective draft answers.
 *
 * @param String $testid
 * @param String $question
 *
 * @return void
 */
loadDraftAnswers($testid, $question) {
	axios
		.get(`/risk-assessment-test/get-draft-answers/${$testid}/${$question}`)
		.then((response) => {
	
		})
		.catch((err) => {
			console.log(err);
		});
},

Now to my knowledge this work, as you can see items set on the component in the Chrome dev tools.

However, when I click on the component again in Chrome dev tools, everything is unset.

Is this expected behaviour? How can I make the component retain it's data?

I ask as in the child component I use v-if in places but obviously after initially working everything is null again.

I made a little video too: https://www.awesomescreenshot.com/video/13255023?key=b841eb39bee6c33b3f79ccfc199f8d80

Essentially if I set anything in the child component, the values are overridden with nulls.

My theory is the timing of the axios request but I'm not too sure.

eggplantSword

3 years ago

Level 9

I'm a bit lost as to what you're actually trying to do. I'm also confused in the first block of code you have @click="loadDraft(draft)" but where are you getting draft from?

When I've needed to save and pass data I usually save what comes into a local variable and leave the prop alone.

What does loadDraftAnswers() actually do? It makes the call but doesn't save anything only throws an error if it has one.

Essentially if I set anything in the child component, the values are overridden with nulls.

Are you setting up things like defaults for these fields? They could be getting overwritten somewhere.

jesse_orange_newable

3 years ago

Level 4

@msslgomez In the first section I'm passing the drafts as a prop from the parent component, so in the parent I have this

<!-- Drafts -->
<risk-assessment-drafts :drafts="drafts" @remove-draft="deleteDraft" @load-draft="loadDraftAnswers" />

So that emits an event to the parent to tell it to load the draft data by calling

async loadDraftAnswers($draft) {
	this.$refs.q1.loadDraftAnswers($draft['test_id'], 0);
    ...
}

This uses $refs to call a method on the child component.

loadDraftAnswers in the child is responsible for retrieving data and filling it's own data properties.

I'm trying to get the child component to call a function and set it's data properties but through the parent.

Please or to participate in this conversation.