代码之家  ›  专栏  ›  技术社区  ›  Devin Crossman

mathjax+vue不重排序方程

  •  3
  • Devin Crossman  · 技术社区  · 6 年前

    MathJax 渲染公式。我可以得到方程渲染时,组件是安装

    我做了一个 code sandbox example 来证明这一点。尝试更改输入中的latex公式,即使控制台显示观察程序正在运行,也不会发生任何更改。

    有人能解释一下我做错了什么吗?

    <script type="text/x-mathjax-config">
      MathJax.Hub.Config({
        tex2jax: {
          inlineMath: [['$','$'],['\\(','\\)']],
        }
      });
    </script>
    <script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS_CHTML"></script>
    

    下面是我的应用程序组件中的代码

    <template>
      <div id="app">
        <input v-model="latex"/><br>
        <div>{{latex}}</div>
      </div>
    </template>
    
    <script>
    export default {
      name: "App",
      data() {
        return {
          latex: '$$\\frac{a}{b}$$'
        }
      },
      methods: {
        reRender() {
          if(window.MathJax) {
            console.log('rendering mathjax');
            window.MathJax.Hub.Queue(["Typeset", window.MathJax.Hub], () => console.log('done'));
          }
        }
      },
      mounted() {
        this.reRender();
      },
      watch: {
        latex: function() {
          console.log('data changed')
          this.reRender();
        }
      }
    };
    </script>
    
    1 回复  |  直到 6 年前
        1
  •  6
  •   Jacob Goh    6 年前

    我可以通过添加两个东西来实现它。

    https://codesandbox.io/s/x2mlq38m4z

    1. 添加 key 钥匙 如果相同,Vue可以重用相同的div元素。什么时候? 钥匙

      <div :key="latex">{{latex}}</div>

    2. 使用 $nextTick 这样在DOM更新之后就会发生重渲染。

      watch: {
        latex: function() {
          console.log('data changed');
          this.$nextTick().then(()=>{
            this.reRender();
          });
        }
      }