使用 MathJax 和 Vue.js 更新 DOM
Rob*_*ill 2 html javascript mathjax vue.js
（编辑包括解决方法，但原来的问题仍然存在）
我有一个 HTML 页面，我正在尝试使用 Vue.js（因为其漂亮且简单的组件等等）和 MathJax（显然是为了布局数学方程）创建一个 HTML 页面，但它们不能很好地协同工作。我发现一些关于这个问题的讨论 w/r/t Angular（另一种类似于 Vue 的 Web 技术，以我有限的理解），但没有关于 Vue 和 MathJax 的讨论。
我意识到问题与 Vue 直接操作 HTML DOM 有关，而 MathJax 没有意识到/处理它。MathJax 中有一些方法声称可以帮助解决此问题，但要么它们不起作用，要么我没有正确使用它们。
这是我尝试的一个最小的例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src='https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML'></script>
<title>Vue and Mathjax Failing Together</title>
</head>
<body>
<h2>Vue and Mathjax Failing Together</h2>
<div id="app">
<p>The MathJax string renders OK in a Vue data binding (shown using "triple mustache" notation because it's got HTML in it)</p>
{{{ mathjax_paragraph }}}
<hr>
<button v-on:click="createDynamicMarkup">Click to show {{ show_math ? "HTML":"MathJax" }} markup</button>
<p>Here is the dynamic element:</p>
<div id="dynamic_markup_div">
{{{ dynamic_markup }}}
</div>
<br>
<br>
<hr>
<pre>
APP DATA = {{ $data | json }}
</pre>
</div>
<script src='vue.js'></script>
<script>
new Vue({
el: '#app',
data: {
html_paragraph: "<p><i>This is plain HTML</i></p>",
mathjax_paragraph: "<p>\\begin{eqnarray*} \\frac{20}{3}=6.66= 6\\mbox{ hours and } 40 \\mbox{ minutes}. \\end{eqnarray*} </p>",
dynamic_markup: "<p><i>plain HTML</i></p>",
show_math: false,
math_thing: 0,
},
methods: {
createDynamicMarkup: function(event) {
this.show_math = !this.show_math;
if (this.show_math) {
this.dynamic_markup = this.mathjax_paragraph;
// After a short delay, tell MathJax to update. (So short it's zero!)
// as per https://groups.google.com/forum/#!topic/mathjax-users/EEg35NK2wXU
MathJax.Hub.Queue(
["Delay", MathJax.Callback, 0],
["Typeset", MathJax.Hub, "dynamic_markup_div"]
);
}
else {
this.dynamic_markup = this.html_paragraph;
}
},
},
});
</script>
</body>
</html>当您第一次加载页面时，会显示纯旧的 HTML；单击按钮，MathJax 应该会显示。除非它没有呈现为数学（除了有时除外- 见下文）。
编辑：我找到了一个解决方法，添加延迟（零毫秒！），然后强制更新，这可行 - 但有必要吗？
无论如何，任何建议将不胜感激！
/抢
买者自负：我不太了解 vue.js。
但这看起来像是一个竞争条件。您告诉 MathJax 渲染新内容，但 DOM 还没有新内容。
快速浏览一下 vue.js 文档，似乎$nextTick应该有所帮助。例如，将其包装在排版调用中：
this.$nextTick(function() {
MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
});
这是一个片段（基于您发布到 MathJax 用户组的片段）。
this.$nextTick(function() {
MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
});
| 归档时间： |
|
| 查看次数： |
2839 次 |
| 最近记录： |