Vue: Vue filter dont work on v-html

[prsolucoes]

Version

2.3.4

Reproduction link

https://github.com/prsolucoes/gohc-web-app/blob/vuejs/src/components/HealthcheckList.vue

Steps to reproduce

1 - Create any component
2 - Create any filter that return HTML and register with Vue.filter
3 - Use the filter with v-html to render original html from filter:

<span v-html="props.row.status | hcStatusFormat"></span>

What is expected?

Render the HTML returned from filter

What is actually happening?

Error:

[Vue warn]: Property or method "hcStatusFormat" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

found in

---> <HealthcheckList> at /Users/paulo/Developer/workspaces/node/gohc-web-app/src/components/HealthcheckList.vue
       <App> at /Users/paulo/Developer/workspaces/node/gohc-web-app/src/App.vue
         <Root>

---

The only way that works:

<span v-html="$options.filters.hcStatusFormat(props.row.status)"></span>

[sqal]

Documentation is clear on this matter - https://vuejs.org/v2/guide/syntax.html#Filters (it only works inside mustache interpolations and v-bind expressions)

The only way that works:
<span v-html="$options.filters.hcStatusFormat(props.row.status)"></span>

or you can call function declared in the methods object

// edit: i just realized, you can use syntax:

 <div :inner-html.prop="props.row.status | hcStatusFormat"></div>

[posva]

what @sqal said 🙂

[ngcdev]

Definitely what @sqal discovered is the best solution and perhaps should be documented. Using $options completely defeats the purpose of using it as a "filter". So might as well create a method.
But if we still want to use it as a filter, then the documentation should mention to bind it to the inner-html DOM property

[andrew441]

Documentation is clear on this matter - https://vuejs.org/v2/guide/syntax.html#Filters (it only works inside mustache interpolations and v-bind expressions)

The only way that works:
<span v-html="$options.filters.hcStatusFormat(props.row.status)"></span>

or you can call function declared in the methods object

// edit: i just realized, you can use syntax:

 <div :inner-html.prop="props.row.status | hcStatusFormat"></div>

Great, this works for me! thank you.