Search code examples
javascriptjquerydatatablestemplate-enginevue.js

How can I render template in a variable with Vue.js?

In mustache.js, templates can be passed as an argument of Mustache.render() as follows:

var view = {
  title: "Joe",
  calc: function () {
    return 2 + 4;
  }
};

var output = Mustache.render("{{title}} spends {{calc}}", view);

I'm looking for a way to use Vue.js in that way, render a template which stored in a variable, then return rendered HTML from render function of jQuery DataTables, without manipulating DOM.

Can I achieve this with Vue.js? If I can't, Should I use mustache.js to implement this instead of Vue.js? Any advices of better way would be also greatly appreciated.

Solution

  • You could approximate the Mustache behavior with something like this:

    var view = new Vue({
    data: {
        title: 'Joe'
    },
    methods: {
      calc: function () {
        return 2 + 4;
      }    
    }
})

var output = view.$interpolate('{{title}} spends {{calc()}}');