Using Vue Filters in the v-html directive

Posted on September 11, 2017

So the other day I was working on an application where I needed to parse a post with JavaScript and render it to HTML.

In Vue 1 this was easy you could just use:

{{{ content | filter }}}

In Vue 2 the triple braces have been removed in favor of v-html

My first thought was to just use a function to transform the content which would be pretty easy. But it would not be reactive. So I reached for a filter, but filters do not work in the v-html directive. Or do they?

After some digging, I found this little gem: https://github.com/vuejs/vue/issues/4352#issuecomment-283324408 which outlines a way of pulling this off.

Using the $options variable on the Vue object you can get and run a filter within v-html!

This feature saved me a lot of trouble and now I feel like I am doing it more the "Vue Way".

In Closing #

This is just a quick thing that I came across a few months ago and needed again a few days ago and had forgotten how it worked.

If you have any questions on how to do something cool with Laravel or Vue.js hit me up on twitter @sampodlogar.