[Vuejs]-Best way to render variables inside html you get from an API in VueJS

0👍

You can just store the value in a data property. And then change it however you like, with an input, method, etc:

Demo: https://codepen.io/aQW5z9fe/pen/vYLyYXo?editors=1011

Code

<textarea
  @input="inputEventHandler"
  v-model="htmlData"
  placeholder="HTML data"
></textarea>

<div v-html="htmlData"></div>
data () {
  return {
    htmlData: ''
  }
},
mounted () {
  // Get data from API
  this.htmlData = this.getData()
},
methods: {
  getData () {
    return 'Data from API'
  },
  inputEventHandler (event) {
    console.log(event)
  }
}

Leave a comment