Question

我对VueJ相当陌生。我有一个Practice组件，其中包含一个ExerciseMC组件。父组件发出请求，并从后面获取一个问题对象（带有文本属性），并将其作为道具传递给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在文本中呈现数学公式 -我已经在ExerciseMC组件中检查了axios和ex prop的响应：一切正常（文本每次都会更改，并且包含每个练习的文本）

我可能会丢失一些有关Vuejs反应性的信息，但经过一些研究我仍然无法弄清楚

Answer 1

由于我之前的建议无法进行编辑。

尝试在组件上使用here

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

VueJS更新组件保留旧值

1 个答案: