0

I would like to print some HTML data to elements table with vue.js. 

new Vue({
  el: "#app",
  data: {
    todos: [
      { text: "<p>Learn JavaScript</p>", done: false },
      { text: "<p>Learn Vue</p>", done: false },
      { text: "<p>Play around in JSFiddle</p>", done: true },
      { text: "<p>Build something awesome</p>", done: true }
    ]
  },
})

and my template is

<div id="app">
  <el-table :data="this.todos">
    <el-table-column prop="text"></el-table-column>
  </el-table>
</div>

But when I run, it prints <p>Learn JavaScript</p> unescaped. I would like to print it as rendered as HTML.

tanaydin
  • 5,171
  • 28
  • 45

1 Answers1

0

I found it by scoped template... Works like this...

<div id="app">
  <el-table :data="this.todos">
    <el-table-column prop="text">
      <template scope="scope">
        <span v-html="scope.row.text"/>
      </template>
    </el-table-column>
  </el-table>
</div>
tanaydin
  • 5,171
  • 28
  • 45
  • beware though, vue complains about deprecation: `the "scope" attribute for scoped slots have been deprecated and replaced by "slot-scope" since 2.5. The new "slot-scope" attribute can also be used on plain elements in addition to – Andries May 14 '19 at 16:07