Question

（编辑包括解决方案，但原始问题仍然存在）

我有一个HTML页面，我正在尝试使用Vue.js（因为它的简单组件和诸如此类的东西）和MathJax（显然是为了布局数学方程式）创建，但它们并不能很好地协同工作。我找到了一些关于这个问题的讨论w / r / t Angular（另一种类似于Vue的网络技术，在我有限的理解中），但没有关于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。除非它没有呈现为数学（除了有时 - 见下文）。

编辑：我找到了解决办法，添加延迟（零毫秒！）然后强制更新，这有效 - 但是它是否有必要？

无论如何，任何建议都会非常感激！

/抢劫

Answer 1

警告：我不太了解vue.js。

但它看起来像是竞争条件。你告诉MathJax渲染新内容，但DOM还没有新内容。

通过快速查看vue.js文档，似乎$nextTick应该有所帮助。例如，将其包裹在排版调用中：

                this.$nextTick(function() {
                     MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
                 });

这是一个片段（基于您发布到MathJax用户组的片段）。

<!DOCTYPE html>
<html>
<!-- Why does MathJax sometimes not render under Vue?
			robcranfill@ "gee-mail" .com
 -->

<head>
	<meta charset="UTF-8">
	<script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/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='https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.10/vue.min.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;

					// Update the whole doc? doesn't work (except in the Javascript debugger! Step over this code and it works!)
					// console.log("hello");
					// MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
					this.$nextTick(function() {
						 MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
					 });

					// Update just the DOM element in question? doesn't work
//					MathJax.Hub.Queue(["Typeset", MathJax.Hub, "dynamic_markup_div"]);

					// Update just the *math* element in question? doesn't work
//					math = MathJax.Hub.getAllJax("dynamic_markup_div")[0];
//					MathJax.Hub.Queue(["Text", math, this.mathjax_paragraph]);

					}
				else {
					this.dynamic_markup = this.html_paragraph;
					}
				},
			},
		});
</script>

</body>
</html>

使用MathJax和Vue.js更新DOM

1 个答案: