Filters not available in JS Class data method

[corderophi678]

The docs show this example, under the "Permalink Function Using a Filter" section:

class Test {
  data() {
    return {
      title: "This is my blog post title",
      // Writes to "/this-is-my-blog-post-title/index.html"
      permalink: data => `/${this.slug(data.key)}/`
    };
  }

  render(data) { /* … */ }
}

module.exports = Test;

But running this example yields an error:

> Having trouble rendering 11ty.js template ./index.11ty.js (TemplateContentRenderError)
> this.slug is not a function (TypeError):
    TypeError: this.slug is not a function

It appears that filters are not actually available in a class's data method. They only seem to be available within the render method (this seems to be confirmed by console.logging this in both the data method and the render method, which logging yields different output).

(Incidentally, the example above's permalink key references data.key, but that should probably be data.title. I was going to submit a PR for that little fix, but thought the availability of filters on the data method deserved primacy.)

[zachleat]

You may be falling prey to arrow functions not having their own this. Try switching to a non arrow function for your permalink and it might work!

[zachleat]

Related: https://twitter.com/getify/status/1101521219243966466

[zachleat]

Ha! Rather we fell prey to that.

I updated the example here https://www.11ty.io/docs/languages/javascript/#permalink-function-using-a-filter

Thanks!

[corderophi678]

😊 Thanks!