[Vuejs]-Vue js Load xmlns schema after updating DOM

by

0👍

✅

I later discovered that this was a compatibility issue with browsers.
Some browsers do not render math tags

-1👍

I suspect you’re using something like

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

when what you should be using is v-html…

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

or even better, assuming it’s the specific MathML tags you want to render dynamically, <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>

Leave a comment