Template function

[HenoTaMyJIb]

Hi, thank you for vue-tables.

There is another question.

On "VueTables Options API" page, there is an example

templates: {
  edit:"<a href={id}><i class='fa fa-edit'></i></a>",
  age:function(row) {
       return this.calcAge(row.birth_date);
  } 
}

In this case this doesn't refer to a Vue instance? Where method calcAge should be defined? Or am I doing something wrong? https://jsfiddle.net/w7u7tf7p/

[matfish2]

It is merely an example, not copied from the demo fiddle. Of course, if you want this to work you need to implement a calcAge method on the vue instance.

[HenoTaMyJIb]

Wrong link. https://jsfiddle.net/w7u7tf7p/2/

Implement like this?

methods: {
    deleteMe: function(id) {
      alert("Delete " + id);
    },
    calcAge: function(date) {
            var age = 0;
            // calculations
            return age;
        }
  },

Getting is not a function error

[matfish2]

It appears that this inside the function refers to the window object. I suppose you can use a global function or simply write the logic in the template function. I will remove this from the example.

[HenoTaMyJIb]

Thank you for help!

[matfish2]

I have added (7bdaa05) the root vue instance (this.$root from the component's perspective) as the this context for the function. Now you CAN use this.calcAge inside the function.