mathjax + vue 不重新渲染方程式

Question

我正在构建一个 vue 应用程序，我想使用 MathJax 来呈现方程式。我可以在安装组件时得到要渲染的方程式但我无法在稍后重新渲染方程式。

我做了一个code sandbox example来证明这一点。尝试更改输入中的乳胶方程式，即使控制台显示观察者是运行.

，也没有任何变化

有人可以向我解释我做错了什么吗？

我通过 cdn 在 index.html 的头部添加了 mathjax，配置如下

<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>

Answer 1

我可以通过添加 2 个东西来让它工作。

https://codesandbox.io/s/x2mlq38m4z

将 key 添加到 div。 key 是虚拟 DOM 的指标。当 key 相同时，Vue 可能会重用相同的 div 元素。当 key 发生变化时，Vue 将呈现一个全新的 DOM 元素，当您想从头开始将第 3 方库的代码 (MathJax) 应用于 DOM 时，这会很有帮助。

<div :key="latex">{{latex}}</div>
使用 $nextTick 以便在 DOM 更新后重新渲染。

像这样

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

mathjax + vue 不重新渲染方程式

mathjax + vue not rerendering equations

javascript

mathjax

vue.js

vuejs2