javascript - mathjax + vue not rerendering equations - Stack Overflow

admin管理员组

文章数量:1394518

I'm building a vue application and I want to use MathJax to render equations. I can get the equations to render when the ponent is mounted but I can't get the equations to rerender at a later point.

I made a code sandbox example to demonstrate this. Try to change the latex equation in the input and nothing changes even though the console shows the watcher is running.

Can someone please explain to me what I am doing wrong?

I added mathjax via cdn in the head of index.html with the following config

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    tex2jax: {
      inlineMath: [['$','$'],['\\(','\\)']],
    }
  });
</script>
<script type="text/javascript" async src=".7.5/MathJax.js?config=TeX-AMS_CHTML"></script>

and here is the code in my app ponent

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

I'm building a vue application and I want to use MathJax to render equations. I can get the equations to render when the ponent is mounted but I can't get the equations to rerender at a later point.

I made a code sandbox example to demonstrate this. Try to change the latex equation in the input and nothing changes even though the console shows the watcher is running.

Can someone please explain to me what I am doing wrong?

I added mathjax via cdn in the head of index.html with the following config

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    tex2jax: {
      inlineMath: [['$','$'],['\\(','\\)']],
    }
  });
</script>
<script type="text/javascript" async src="https://cdnjs.cloudflare./ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS_CHTML"></script>

and here is the code in my app ponent

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

• javascript
• vue.js
• vuejs2
• mathjax

Share Improve this question Follow asked Oct 3, 2018 at 22:29 Devin CrossmanDevin Crossman 7,6021313 gold badges6767 silver badges102102 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

I am able to make it work by adding 2 things.

https://codesandbox.io/s/x2mlq38m4z

1. add key to the div. key is an indicator for virtual DOM. When key is the same, Vue may reuse the same div element. When key change, Vue will render a pletely new DOM element, which is helpful when you want to apply 3rd party library's code (MathJax) to the DOM from scratch.

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

2. use $nextTick so that the rerender happens after the DOM have updated.

like this

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

本文标签： javascriptmathjaxvue not rerendering equationsStack Overflow