CODEWITHSUNDEEP
vuejs2vue-component
Robert
Robert

Reputation: 2691

Vue dynamic html - won't to parse vue data object

I have sample code written in Vue:

  template: `
    <table>
     <tbody>
      <tr v-html="tableHTMLContent"></tr>
     </tbody>
    </table>`,
   data() {
     this.tableHTMLContent: '',
     this.myTextName: 'aaaa'
   },
  methods: {
   addSampleCode() {
     this.tableHTMLContent = '<p> {{ myTextName }} </p>'
   }
  }

The problem is with parsing {{ myTextName }} tag. Html is injected correctly, but Vue won't to parse myTextName variable. Vue doesn't display aaaa value. What I have to do to parse Vue tags like {{ }} and others tags like v-for, v-if and so on.

Upvotes: 0

Views: 343

Answers (1)

Benjamin
Benjamin

Reputation: 1104

To render data values together with template code within a method you can use Vue.compile( ... )

See this link:

https://v2.vuejs.org/v2/api/#Vue-compile

Usage Example:

var res = Vue.compile('<div><span>{{ msg }}</span></div>')

new Vue({
  data: {
    msg: 'hello'
  },
  render: res.render,
  staticRenderFns: res.staticRenderFns
})

Upvotes: 3

Related Questions