Object element call function in Vuejs

Question

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/

I think your approach is not good.You are keeping methods into the data object. — Belmin Bedak
– Belmin Bedak, Commented Nov 8, 2016 at 7:22
The way you done It confuse me a bit.Why you didn't do basic iteration of your array, and then wrap your status value in strong tag in template ? Or if you want to go without putting strong tag directly in template, use computed property, or method do it for you. — Belmin Bedak
– Belmin Bedak, Commented Nov 8, 2016 at 9:43
@Belmin i dont want to change the template, how can i use computed property without editing the template? — Aaroniker
– Aaroniker, Commented Nov 8, 2016 at 9:48

tony19 · Accepted Answer · 2022-07-16 00:10:56Z

2

+200

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.

edited Jul 16, 2022 at 0:10

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Nov 10, 2016 at 10:10

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

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

1 Comment

Aaroniker Over a year ago

thanks - working!! i also added v-if to check if value.content is a function, so i dont have to add it everywhere :)

Collectives™ on Stack Overflow

Object element call function in Vuejs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related