changing data with vue in mathML cannot update the view
JS
< script type= "text/javascript" src= " http://cdn.mathjax.org/mathja.;>
</script>
<script src= "; > < / script >
< script src= " https://cdn.jsdelivr.net/npm/.;></script>
<script>
var vm = new Vue({
el:"-sharpapp",
data:{
list:{
squrt:33,
qurt:2,
aa:"a",
bb:"b"
}
},
mounted(){
},
methods:{
clickMe(){
this.list.squrt = this.list.squrt * 10;
this.list.aa = 55555;
}
}
})< / script >
html
< body >
< div id= "app" >
{{ list.squrt }}
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<mi v-text="list.aa"> x </mi>
<mo> + </mo>
<mi> {{ list.qurt }} </mi>
<mo> + </mo>
<mi> {{ list.squrt }} </mi>
</mrow>
<mo></mo>
</mover>
</math>
<button id="btn" @click="clickMe"></button> < / div >
< / body >
CSS
< style >
.MathJax{outline:0;}< / style >