为什么vue.js 3中的mathjax需要刷新初始显示开发页面,并且在步骤2中不起作用

sxpgvts3  于 2023-01-21  发布在  Vue.js
关注(0)|答案(1)|浏览(253)

我需要在两个连续的步骤中在同一页上一个在另一个下面显示相同的表达式。enter image description hereenter image description here带有一个递增计数器的按钮(etape)
在发展过程中,显示是真实的更新的,但某些表达式是在浏览器页面刷新后才解释的,而且在第二步中,数学表达式是不解释的,我对此仍感到不解。
main.js

import { createApp } from 'vue'
import App from './App.vue'
import VueMathjax from 'vue-mathjax-next';

createApp(App).use(VueMathjax).mount('#app')

App.vue

<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++"> Presss 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>

毫无结果的几个小时。缩减为几行来限制问题

rdlzhqv9

rdlzhqv91#

我找到了一个变通办法:
应用程序版本:

<template>
  <div id="app">
    <h1>Étape = {{ etape }}</h1>
    <h2>
      With vscode, change src, requires page refresh even on initial display
    </h2>
    <div v-if="etape >= 0">
      <ul>
        <li>(E 1) <vue-mathjax :formula="racine" /></li>
      </ul>
      <br />
      <button @click="etape++">Presss Next step</button>
    </div>
    <div v-if="etape >= 1">
      <hr />
      <h2>second step : Étape = {{ etape }}</h2>

      <textarea v-model="proba" />
      <br />
      whith input : <vue-mathjax :formula="proba" /> <br />
      without input :
      <vue-mathjax :formula="fractionSimple" />
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      etape: 0,
      racine: "$ x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}. $ ",
      proba: "$ P_A(B) = \\frac{P(A \\cap B)}{ P(A)} $",
      fractionSimple: "$ \\frac{1}{2} $",
    };
  },
};
</script>
<style>
</style>

相关问题