Question

我的package.json：

  "dependencies": {
    "bootstrap": "^3.3.7",
    "mathjax": "^2.7.2",
    "vue": "^2.5.2",
    "vue-moment": "^3.1.0",
    "vue-router": "^3.0.1"
  },

我有一个组件：

<template>
  <div class="post--body" v-html="previewText" id="post--body"></div>
</template>

<script>

import MathJax from 'mathjax'

export default {
  name: 'blog-post',
  data () {
    return {
      post: {body: ""}
    }
  },
  mounted() {
    fetch("/api/post/" + this.$route.params.id)
        .then(response => response.json())
        .then(data => {
            this.post = data;
        })
    this.$nextTick(function () {
      console.log("tick")
      MathJax.Hub.Typeset()   
    })
  },
  computed: {
    previewText () {
      return this.post.body
    } 
  }
}
</script>

但是我得到了“Uncaught SyntaxError：Unexpected token＆lt;”在MathMenu.js上？V = 2.7.2：1 如何正确使用mathjax？

Answer 1

我认为你不能导入mathjax，因为如果我控制日志导入的mathjax，它会显示空对象。我已经浏览了文件夹目录，这似乎不可导入。因此，您需要手动将script src指向Mathjax.js

我目前在vue中使用Mathjax的方法是制作一个自定义的全局组件。

<template>
  <span ref="mathJaxEl" v-html="data" class="e-mathjax"></span>
</template>
<script type="text/javascript">
  export default{
  props:['data'],
  watch:{
    'window.MathJax'(val){
        this.renderMathJax()
    },
    'data'(val){
        this.renderMathJax()
    }
   },
  mounted(){
    this.renderMathJax()
  },
  methods:{
    renderMathJax(){
        if(window.MathJax){
window.MathJax.Hub.Queue(["Typeset", window.MathJax.Hub,this.$refs.mathJaxEl]);
    }
  }
}
}
</script>

通过使用变量来保存boolean是否已经渲染了mathjax，可以做得更好一些，因为渲染会被调用两个监视值，这两个监视值都会在浏览器刷新的情况下被触发。

Answer 2

因此对于MathJax v3，只需将以下内容添加到您的vue组件中

mounted(){
    MathJax.typeset();
},

现在，当通过Vue路由器导航到页面时，数学将在组件安装上呈现。

如何在vue.js 2中使用mathjax？

2 个答案: