My goal is to show the same expressions in two steps on a single page, one after the other. I have included links to images here: enter image description here, enter image description here. Along with this, there should be a button that increments a counter (etape).
While developing, I noticed that the display updates in real-time but some expressions are only interpreted after refreshing the browser page. Additionally, in the second step, mathematical expressions are not being interpreted properly. This issue has left me perplexed.
In my main.js file:
import { createApp } from 'vue'
import App from './App.vue'
import VueMathjax from 'vue-mathjax-next';
createApp(App).use(VueMathjax).mount('#app')
In my App.vue file:
<template>
<div id="app">
<h1>Étape = {{ etape }}</h1>
<h2> Requires page refresh even on initial display </h2>
<div v-if="etape >= 0">
<ul>
<li>
<h3>(E 1) </h3> $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}. $$
</li>
<li>
<h3>(E 2) </h3> \( f(x) = x^2 + 2 x=2 \)
</li>
<li>
<h3>(E 3) </h3> \( P_A(B) = \frac{P(A \cap B)}{ P(A)} \)
</li>
</ul>
<h2> But the following two scriptures are not interpreted </h2>
<ul>
<li>
<h3>(E 4) </h3> $ f(x) = x^2 + 2 \quad \mathrm { if } \quad x=2 $
</li>
<li>
<h3>(E 5) </h3> $ P_A(B) = \frac{P(A \cap B)}{ P(A)} $
</li>
</ul>
<br />
<button @click="etape++"> Press Next Step</button>
</div>
<div v-if="etape >= 1">
<hr>
<h2> Second Step: Étape = {{ etape }} </h2>
<ul>
<li>
<h3>(E 1) </h3> $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}. $$
</li>
<li>
<h3>(E 2) </h3> \( f(x) = x^2 + 2 x=2 \)
</li>
<li>
<h3>(E 3) </h3> \( P_A(B) = \frac{P(A \cap B)}{ P(A)} \)
</li>
</ul>
<ul>
<li>
<h3>(E 4) </h3> $ f(x) = x^2 + 2 \quad \mathrm { if } \quad x=2 $
</li>
<li>
<h3>(E 5) </h3> $ P_A(B) = \frac{P(A \cap B)}{ P(A)} $
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
components: {},
data() {
return {
etape: 0,
}
}
};
</script>
<style>
</style>
I spent several fruitless hours trying to debug this issue and have summarized it briefly here to pinpoint the problem.