MathJax v3 can only typeset using setTimeout in Vue-CodePudding

I'm using Vue to build an website. I used ajax to get data from servers and render the data in the frontend. The content have some math-jax-format data and I want to use MathJax to handle it. However, if I call MathJax.typeset() immediately like:

mounted() {
    const result = getQuery("./detail/")
    const app = this
result.then(function (response) {
  if (response != null) {
    app.$data.blog_item = response
    app.$data.thumb_up_show = response.thumb_up,
    app.$data.thumb_down_show = response.thumb_down
  }
  const mathjax = window.MathJax
  // immediately call
  mathjax.typeset()

})

the math-jax will not be rendered.But if I use setTimeout to wait for one second before calling Mathjax.typeset(), then I can get the right result.

mounted() {
    const result = getQuery("./detail/")
    const app = this
result.then(function (response) {
  if (response != null) {
    app.$data.blog_item = response
    app.$data.thumb_up_show = response.thumb_up,
    app.$data.thumb_down_show = response.thumb_down
  }
  const mathjax = window.MathJax
  // using setTimeout, which can get the right result
  setTimeout(function () {
    mathjax.typeset()
  }, 1000)
})

Although setTimeout works, but I don't want to use it. Is there any way to avoid using setTimeout?

CodePudding user response：

as what you said， I don't know what this function does

mathjax.typeset()

but may be you use the app.$data in your method, it may cause problem
another way, you may can try nextTick nexttick