mathjax + vue не рендеринг уравнений - PullRequest
Новая
       8

mathjax + vue не рендеринг уравнений

0 голосов
/ 04 октября 2018

Я создаю приложение vue и хочу использовать MathJax для визуализации уравнений.Я могу получить уравнения для рендеринга, когда компонент смонтирован, но я не могу сделать так, чтобы уравнения перерисовывались позже.

Я сделал пример песочницы с кодом , чтобы продемонстрировать это.Попробуйте изменить уравнение латекса на входе, и ничего не изменится, даже если консоль показывает, что наблюдатель работает.

Может кто-нибудь объяснить мне, что я делаю неправильно?

Я добавил mathjax черезcdn в главе 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>

1 Ответ

0 голосов
/ 04 октября 2018

Я могу заставить его работать, добавив 2 вещи.

https://codesandbox.io/s/x2mlq38m4z

  1. добавить key в div.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();
      });
    }
  }
...