Using a filter with v-html in Vue

The correct way to inject HTML formatted data into a Vue component is to use the v-html property on the element:

<p v-html="my_variable"></p>

However, this doesn't support the usual way to use a filter:

<p>\{\{ my_variable | my_filter\}\}</p>

In the above example, the filter would be applied and the HTML escaped. Not what we want. Logic would say put the pipe and the filter in the v-html property, but that fails.

The way to do it is to call the filter explictly as a method on the data:

<p v-html="$options.filters.my_filter(my_variable)"></p>