Is it possible to Use Vuejs 2 to Update MathJax dynamically?

Question

Is it possible to Use Vuejs 2 to Update MathJax dynamically?

Just figured out how to resolve this issue. Simply bind the data using v-html

   <div id="app">
    <h1 v-html="equation"></h1>
    <button @click='change'>Change</button>
   </div>

var vm = new Vue({
  el: '#app',
  data: function() {
    return {
      equation: '`result`'
    }
  },
  methods : {
    change : function() {
      this.equation = '`x '+Math.floor((Math.random() * 10) + 1)+'`';
this.$nextTick(function() {
    MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
       });

    }
  }
})

Why is the element duplicating when I update the data? Any idea on how to update MathJax with vuejs 2?

Check out my app here: Image

var vm = new Vue({
  el: '#app',
  data: function() {
    return {
      equation: 'result'
    }
  },
  methods : {
    change : function() {
      this.equation = 'result_'+Math.floor((Math.random() * 10) + 1);
this.$nextTick(function() {
    MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
       });

    }
  }
})

javascript vue.js vuejs2 mathjax

Answer 1

Answer №1

If you want to update the MathDiv element with a new formula without replacing its entire contents and then trigger MathJax.Hub.Typeset(), there is a more efficient method available. This involves requesting MathJax for the specific element jax related to the mathematical expression, and calling its function to update the displayed formula. Here's an example of how you can modify the code:

  <div id="app">
   <h1 >{{ math }}</h1>
    <button @click='modify'>Modify</button>
  </div>


 <script>   
 var vm = new Vue({
      el: '#app',
      data: function() {
        return {
          math: '`sum_1`'
        }
      },
      mounted: function () {
        this.$nextTick(function () {
          MathJax.Hub.Typeset()    
        })  
      },
      methods : {
        modify : function() {
          this.math = 'sum_'+Math.floor((Math.random() * 10) + 1);
          this.$nextTick(function() {
          var mathematics = MathJax.Hub.getAllJax("MathDiv")[0];
            MathJax.Hub.Queue(["Text", mathematics, this.math]);    
          });
        }
      }
    })
</script>

Reference:

Alternatively, you can utilize v-html to bind the data directly to the element.

Answer 2

If you want to update the MathDiv element with a new formula without replacing its entire contents and then trigger MathJax.Hub.Typeset(), there is a more efficient method available. This involves requesting MathJax for the specific element jax related to the mathematical expression, and calling its function to update the displayed formula. Here's an example of how you can modify the code:

  <div id="app">
   <h1 >{{ math }}</h1>
    <button @click='modify'>Modify</button>
  </div>


 <script>   
 var vm = new Vue({
      el: '#app',
      data: function() {
        return {
          math: '`sum_1`'
        }
      },
      mounted: function () {
        this.$nextTick(function () {
          MathJax.Hub.Typeset()    
        })  
      },
      methods : {
        modify : function() {
          this.math = 'sum_'+Math.floor((Math.random() * 10) + 1);
          this.$nextTick(function() {
          var mathematics = MathJax.Hub.getAllJax("MathDiv")[0];
            MathJax.Hub.Queue(["Text", mathematics, this.math]);    
          });
        }
      }
    })
</script>

Reference:

Alternatively, you can utilize v-html to bind the data directly to the element.

Is it possible to Use Vuejs 2 to Update MathJax dynamically?

Answer №1

Similar questions

Decrease initial loading time for Ionic 3

Utilizing a try/catch block for validating a JSON file is ineffective

The function chartobject-1.render() is returning an error message stating: "Unable to locate the specified container within the document. This issue is occurring in the

Ways to handle a hidden element in Selenium Webdriver

Is the Messenger Bot ignoring random users?

Issue: The component series.line does not exist. Please ensure it is loaded before using it in Vue Echarts

Having difficulty using the forEach() method to loop through the array generated by my API

What is the best way to monitor different selections to keep track of their state?

JavaScript code to prevent user from entering phone number

The server at localhost responds with a CANNOT GET/ error message

I'm curious about how the OAuth protocol handles the return of parameters after the # symbol in the oauth_callback

"Change opacity smoothly with the FadeToggle feature for a

Having trouble with submitting the second stage of a multi-step form through Ajax technology

The problem of heavy images not uploading persists when using Ajax/Jquery, as the FormData appears to

Vue directive that automatically updates input when blurred

Running the JavaScript code on a webpage using Selenium WebDriver

Controlling data tables with knockout.js

How should we provide the search query and options when using fuse.js in an Angular application?

Utilize an asynchronous method to upload files to Google Cloud Storage in a loop

Ajax is unintentionally duplicating the request