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

Question

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.

Please refer:-coursetro.com/posts/code/135/…

Hitesh Anshani
– Hitesh Anshani

2018-06-19 11:05:29 +00:00
Commented Jun 19, 2018 at 11:05 — Hitesh Anshani
– Hitesh Anshani, Commented Jun 19, 2018 at 11:05

tony19 · Accepted Answer · 2022-07-15 01:09:39Z

3

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
})

edited Jul 15, 2022 at 1:09

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jun 19, 2018 at 11:02

Benjamin

1,1021 gold badge20 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related