Vue js 更新 DOM 后加载 xmlns 模式答案

【问题标题】：Vue js Load xmlns schema after updating DOMVue js 更新 DOM 后加载 xmlns 模式
【发布时间】：2020-11-30 11:53:29
【问题描述】：

我正在使用 vue js 动态更新 dom，但我发现在 vue 更新 dom 后我的数学标签没有被加载。比如这段代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<p>
  <math xmlns="http://www.w3.org/1998/Math/MathML">
    <msqrt>
      <mi>x</mi>
      <mi>y</mi>
    </msqrt>
  </math>
</p>

应该显示 xy 的平方根。如果我复制此代码并将其粘贴到一个干净的 html 文件中，它运行良好，但如果它由 vue 呈现，则数学标记将呈现为普通文本。有没有办法强制 vue 在用它更新 dom 之前加载数学对象的 xmlns 模式？

【问题讨论】：

您可能需要忽略数学标签才能使其工作：请参阅stackoverflow.com/questions/59852556/…
数学标签是动态添加的，我使用ckeditor wiris插件来创建它们
你能准确地说明你是如何让标签“由vue渲染”的吗？

标签： vue.js dom mathml

【解决方案1】：

我怀疑你正在使用类似的东西

<p>{{ mathTag }}</p>

当你应该使用的是v-html...

<p v-html="mathTag"></p>

甚至更好，假设它是您想要动态呈现的特定 MathML 标签，<component>

new Vue({
  data: () => ({
    operation: 'msqrt',
    identifiers: ['x', 'y']
  })
}).$mount('#app')

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<div id="app">
  <math>
    <component :is="operation">
      <mi v-for="(identifier, i) in identifiers" :key="i">{{ identifier }}</mi>
    </component>
  </math>
</div>

【讨论】：

【解决方案2】：

后来我发现这是与浏览器的兼容性问题。一些浏览器不呈现数学标签

【讨论】：