javascript – 用Vuejs 2更新动态MathJax？

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]);
       });

    }
  }
})

解决方法:

您可以替换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将数据绑定到元素.

标签：mathjax,javascript,vue-js,vuejs2
来源： https://codeday.me/bug/20190727/1552360.html