在Vue中，我使用v-show制作了一份多页调查问卷，make app容器名为RiskAssessmentTest.vue。
我有一个名为RiskAssessmentDrafts.vue的组件用于加载调查问卷草稿，如下所示

<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>

在父组件中调用loadDraft()方法，如下所示

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

loadDraftAnswers()方法获取调查问卷的数据并将其加载到子组件中。

/**
 * 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);
},

我不知道这种做法是好是坏，但我随后调用了子组件中的loadDraftAnswers()方法。

/**
 * 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);
        });
},

据我所知，现在这项工作，你可以看到项目设置的组件在 chrome 开发工具。

但是，当我在Chrome开发工具中再次单击组件时，一切都被取消设置。

这是预期的行为吗？我怎样才能让组件保留它的数据？
我要求在子组件中使用v-if，但很明显，在最初工作后，所有内容再次为空。
我也做了一个小视频：https://www.awesomescreenshot.com/video/13255023?key=b841eb39bee6c33b3f79ccfc199f8d80