mathjax + vue 재렌더링 방정식

mathjax + vue 재렌더링 방정식

vue 어플리케이션을 만들고 있는데 MathJax를 사용하여 방정식을 렌더링하고 싶습니다.컴포넌트가 마운트되었을 때 렌더링할 방정식을 가져올 수 있지만 나중에 렌더링할 방정식을 가져올 수 없습니다.

이것을 증명하기 위해서 코드 샌드박스의 예를 만들었습니다.입력에서 라텍스 방정식을 변경하려고 합니다.콘솔에 워처가 실행 중이라고 표시되어도 변경되지 않습니다.

제가 뭘 잘못하고 있는지 누가 좀 설명해 주시겠어요?

다음 구성으로 cdn 경유로 mathjax를 index.html 선두에 추가했습니다.

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

나는 2가지를 더해서 그것을 가능하게 할 수 있다.

https://codesandbox.io/s/x2mlq38m4z

1. 더하다keydiv까지. key는 가상 DOM 의 인디케이터입니다.언제key동일, Vue는 동일한 div 요소를 재사용할 수 있습니다.언제key변경 시 Vue는 완전히 새로운 DOM 요소를 렌더링합니다.이것은 서드파티 라이브러리의 코드(MathJax)를 처음부터 DOM에 적용하는 경우에 도움이 됩니다.

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

2. $nextTick을 사용하여 DOM 업데이트 후 렌더가 실행되도록 합니다.

이것처럼.

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

언급URL : https://stackoverflow.com/questions/52636554/mathjax-vue-not-rerendering-equations