如何在vue.js 2中使用mathjax？
提问于 2018-01-25 14:33:51
我的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>但是我在MathMenu.js?V=2.7.2:1上得到了"Uncaught :Uncaught <“如何正确使用SyntaxError？
回答 2
Stack Overflow用户
发布于 2018-01-25 14:55:50
我不认为你可以导入mathjax，因为如果我在控制台上记录导入的mathjax，它会显示空对象。我也检查过文件夹目录，它似乎不能导入。因此，您需要手动将指向Mathjax.js的script源放入
我目前在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>通过使用变量保存布尔值可以更好一些，无论是否呈现了mathjax，因为呈现被调用为两个监视值，这两个值都可能在浏览器刷新的情况下触发。
Stack Overflow用户
发布于 2020-04-07 15:36:06
因此，对于MathJax v3，只需将以下内容添加到您的vue组件
mounted(){
MathJax.typeset();
},现在，当通过Vue路由器导航到页面时，数学将呈现在组件挂载上。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48445352
复制相关文章
腾讯云开发者
