VueJS 更新组件保留旧值

Question

我对 VueJs 很陌生。我有一个 Practice 组件，其中包含一个 ExerciseMC 组件。父组件发出请求，从后面获取一个 question 对象（带有 text 属性），并将其作为 props 传递给ExerciseMC 组件。第一次渲染组件时，文本被渲染，但第二次，它渲染新标题加上旧标题等等......我不知道这个“内存”来自哪里，但它是不是我预想的结果……

这是我的Practice 组件：

<template>
<div>
    <h2>Practice</h2>
    <div id="activity">
        <span id="init" v-if="type === 'init'">
            Click on the "Next step" button when ready
        </span>
        <span id="mc" v-else-if="type === 'mc'">
            <exerciseMC :ex="ex"/>
        </span>
        <span id="sa" v-else-if="type === 'sa'">

        </span>
    </span>
    <hr/>
    <button type="button" id="btnValidate" @click="validate()">Validate</button>
    &emsp;
    <button type="button" id="btnSkip" @click="skip()">Skip</button>
    &emsp;
    <button type="button" id="btnNextStep" @click="nextstep()">Next step</button>
</div>
</template>

<script>
    import ExerciseMC from '../exercises_temps/ExerciseMC'
    import axios from 'axios'

    export default {
        mounted(){
            console.log("Practicing");
            MathJax.Hub.Queue(["Typeset",MathJax.Hub, "activity"]);
        },
        components: {
            exerciseMC: ExerciseMC
        },
        data(){
            return {
                type: 'init',
                ex: Object
            }
        },
        methods: {
            validate() {
                console.log("Validate");
            },
            skip() {
                console.log("Skip");
            },
            nextstep(){
                console.log("Next Step");
                const path = "http://localhost:8000/user/next-step";
                axios
                    .get(path)
                    .then((response) => {
                        this.ex = {};
                        console.log("Response : ");
                        console.log(response.data);
                        this.ex = response.data;
                        this.type = response.data.type;
                    })
                    .catch((error) => {
                        console.log("Error");
                        console.log(error);
                    });

            }
        }
    }
</script>

这是我的ExerciseMC 组件：

<template>
<span id="exercise">
    <p id="text">{{ex.text}}</p>
</span>
</template>

<script>
    export default{
        props: {
            ex: Object,
        },
        mounted(){
            MathJax.Hub.Queue(["Typeset", MathJax.Hub, "exercise"])
        },
        beforeUpdate(){

        },
        updated(){
            console.log(this.ex);
            MathJax.Hub.Queue(["Typeset", MathJax.Hub, "exercise"])
        },
    }
</script>

有用的信息： - 我正在使用 MathJax 在文本中呈现数学公式 - 我已经检查了来自 axios 的响应和 ExerciseMC 组件中的 ex 属性：一切正常（文本每次都会更改，并且包含每个练习的文本）

我可能遗漏了一些关于 Vuejs 反应性的东西，但经过一些研究后我仍然无法弄清楚

Answer 1

编辑，因为我之前的建议不起作用。

尝试在您的组件上使用key

<exerciseMC :key="ex.text" :ex="ex"/>