JSFiddle - React, Tailwind, and code Playground

by cpfarher

HTML

<div id="vue">
  <div>
    {{parse(string)}}
  </div>
</div>

JavaScript

new Vue({
	el:'#vue',
  data:{
  	greeting:'Hello',
    name:'Vue',
    string:'{{greeting+1}} {{name}}! {{1 + 1}}'
  },
  methods:{
  evalInContext(string){
    try{
    	return eval('this.'+string)
    } catch(error) {
    	try {
      	return eval(string)
      } catch(errorWithoutThis) {
      	console.warn('Error en script: ' + string, errorWithoutThis)
      	return null
      }
    }
  },
  	parse(string){
    	return string.replace(/{{.*?}}/g, match => {
      	var expression = match.slice(2, -2)
        
        return this.evalInContext(expression)       
      })
    }
  }
})