Vue js 更新后加载 xmlns 模式 DOM

Question

我正在用 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 模式？

Answer 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>

Answer 2

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

Vue js 更新后加载 xmlns 模式 DOM

Vue js Load xmlns schema after updating DOM

dom

mathml

vue.js