[英]mathjax + vue not rerendering equations
我正在构建一个 vue 应用程序,我想使用MathJax来渲染方程式。 我可以在安装组件时获取要渲染的方程式,但我无法在稍后重新渲染方程式。
我制作了一个代码沙箱示例来演示这一点。 尝试更改输入中的乳胶方程,即使控制台显示观察者正在运行,也没有任何变化。
有人可以向我解释我做错了什么吗?
我通过cdn在index.html的头部添加了mathjax,配置如下
<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>
我可以通过添加两件事来使其工作。
https://codesandbox.io/s/x2mlq38m4z
将key
添加到 div。 key
是虚拟 DOM 的指标。 当key
相同时,Vue 可能会重用相同的 div 元素。 当key
改变时,Vue 将渲染一个全新的 DOM 元素,这在您想从头开始将 3rd 方库的代码 (MathJax) 应用到 DOM 时很有帮助。
<div :key="latex">{{latex}}</div>
使用$nextTick以便在 DOM 更新后进行重新渲染。
像这样
watch: {
latex: function() {
console.log('data changed');
this.$nextTick().then(()=>{
this.reRender();
});
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.