Vue JS在更新DOM后加载xmlns架构

问题描述

我正在使用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呈现的，则math标签将呈现为普通文本。有没有办法在更新dom之前强制vue加载数学对象的xmlns模式？

解决方法

我后来发现这是浏览器的兼容性问题。某些浏览器无法呈现数学标记

我怀疑您使用的是类似

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

dom mathml vue.js