使用 Vuejs 2 更新动态 MathJax？

Question

P.S：现在我知道如何解决这个问题了。使用 v-html

绑定数据

   <div id="app">
    <h1 v-html="math"></h1>
    <button @click='change'>Change</button>
   </div>

var vm = new Vue({
  el: '#app',
  data: function() {
    return {
      math: '`sum`'
    }
  },
  methods : {
    change : function() {
      this.math = '`a '+Math.floor((Math.random() * 10) + 1)+'`';
this.$nextTick(function() {
    MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
       });

    }
  }
})

当我更新数据时，它重复元素 ??? 我不知道为什么，如何使用 vuejs 2 更新 MathJax？

这是我的应用程序：Image

var vm = new Vue({
  el: '#app',
  data: function() {
    return {
      math: 'sum'
    }
  },
  methods : {
    change : function() {
      this.math = 'sum_'+Math.floor((Math.random() * 10) + 1);
this.$nextTick(function() {
    MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
       });

    }
  }
})

Answer 1

您可以替换 MathDiv 元素的全部内容并调用 MathJax.Hub.Typeset()，但有一种更有效的方法，即向 MathJax 请求数学元素 jax，并调用其方法用于替换该元素显示的公式。所以更新后的代码将如下所示：

  <div id="app">
   <h1 >{{ math }}</h1>
    <button @click='change'>Change</button>
  </div>


 <script>   
 var vm = new Vue({
      el: '#app',
      data: function() {
        return {
          math: '`sum_1`'
        }
      },
      mounted: function () {
        this.$nextTick(function () {
          MathJax.Hub.Typeset()    
        })  
      },
      methods : {
        change : function() {
          this.math = 'sum_'+Math.floor((Math.random() * 10) + 1);
          this.$nextTick(function() {
          var math = MathJax.Hub.getAllJax("MathDiv")[0];
            MathJax.Hub.Queue(["Text", math, this.math]);    
          });
        }
      }
    })
</script>

参考：http://docs.mathjax.org/en/latest/advanced/typeset.html#manipulating-individual-math-elements

或

您可以使用 v-html 将数据绑定到元素。

使用 Vuejs 2 更新动态 MathJax？

Update dynamic MathJax with Vuejs 2?

javascript

mathjax

vue.js

vuejs2