동적 MathJax를 Vuejs 2로 업데이트하시겠습니까?

동적 MathJax를 Vuejs 2로 업데이트하시겠습니까?

추신: 이제 이 문제를 해결하는 방법을 알게 되었습니다.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]);
       });

    }
  }
})

데이터를 갱신하면 요소가 중복됩니다.왜 그런지 모르겠는데, MathJax를 vuejs 2로 업데이트하려면 어떻게 해야 하나요?

제 앱입니다.이미지

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을 사용하여 데이터를 요소에 바인딩할 수 있습니다.

언급URL : https://stackoverflow.com/questions/43301213/update-dynamic-mathjax-with-vuejs-2