Question

Я пытался использовать Math Live с Vue. js, но я не могу этого сделать. Я следил за каждым шагом, но он не работает, я не знаю почему. Вероятно, я делаю что-то не так, потому что я новичок с Vue. js.

Мой главный. js

 import MathLive from "../node_modules/mathlive/dist/src/mathlive" 
import Mathfield from "../node_modules/mathlive/dist/src/vue-mathlive"


Vue.use(Mathfield, MathLive)

Индекс. vue

<mathlive-mathfield 
      id='mf' 
      ref="mathfield" 
      :config="{smartFence:false}"
      @focus="ping"
      :on-keystroke="displayKeystroke"
      v-model="formula">f(x)=</mathlive-mathfield>
      <div>
        <label>Keystroke:&nbsp;</label><kbd>{{keystroke}}</kbd>
      </div>
      <div class="output">LaTeX: {{formula}}</div> 
         <div>
             <button v-on:click="sayIt">Say It</button>
             <button v-on:click="setIt">Set It</button>
         </div>
     </div>


data(){
    return{
        formula: 'g(x)',
        keystroke: '',  
}

}

methods:{
    sayIt: function(event) {
        this.$refs.mathfield.$perform(['speak', 'all']);
    },
    setIt: function(event) {
        this.formula = 'x=-b\\pm \\frac {\\sqrt{b^2-4ac}}{2a}';
    },
    ping: function() {
        console.log('ping');
    },
    displayKeystroke: function(keystroke, _ev) { 
        this.keystroke = keystroke;
        return true; 
    },

}

Ошибка: введите описание изображения здесь

https://www.npmjs.com/package/mathlive

https://github.com/arnog/mathlive/tree/master/examples/vue

https://madewithvuejs.com/mathlive-math-editor