Aaroniker Aaroniker - 26 days ago 24
Javascript Question

Object element call function in Vuejs

i want to use a function to set individual content of table cells.
In this example i want to wrap the status with the

<strong>
- Tag
(I dont edit the template, because at my application it's stored in a component, which is used multiple times ...)

tableData: [
{
"name": "test1",
"status": "1"
},
{
"name": "test2",
"status": "0"
},
{
"name": "test3",
"status": "1"
}
],
columns: {
name: {
title: "name"
},
status: {
title: "status",
content: function(entry) {
return "<strong>" + entry.status + "</strong>";
}
}
}


I tried smth like
value.content.call()
in the
v-for
loop, but this doesnt work.

JsFiddle: https://jsfiddle.net/7anuorbu/4/

Answer

You can use help of v-html, which takes care of rendering of html in the views. In the HTML, you can call the function like this:

<tr v-for="entry in tableData">
  <td v-for="(value, key) in columns" v-html="value.content(entry)">
  </td>
</tr>

To make this work I have modified columns data as well, as both elements need to have content.

   columns: {
      name: {
        title: "name"        ,
        content: function(entry) {
          return "<span>" + entry.name + "</span>";
        }
      },
      status: {
        title: "status",
        content: function(entry) {
          return "<strong>" + entry.status + "</strong>";
        }
      }

Whole working code is here.