VueJS2 v-html with filter - vuejs2

Question

How to display raw html with filter?
I have something like this:
K.json = function( json ) {
if( typeof json!='string' ) json = JSON.stringify( json, null, 2 );
json = json.replace( /</g, '<' ).replace( />/g, '>' ); // replace(/&/g, '&')
var pattern = /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g;
var html = json.replace( pattern, function( match ) {
var cls = 'number';
var suffix = '';
if( /^"/.test( match ) ) {
if( /:$/.test( match ) ) {
cls = 'key';
match = match.slice( 0, -1 );
suffix = ':'
} else {
cls = 'string';
}
} else if( /true|false/.test( match ) ) {
cls = 'boolean';
} else if( /null/.test( match ) ) {
cls = 'null';
}
return '<span class="' + cls + '">' + match + '</span>' + suffix;
} );
return html;
};
Vue.filter( 'json', K.json );
And use them something like this:
<div v-html="thecolumn | json"></div>
It shows a warning and displayed incorrectly:
vue.js:523 [Vue warn]: Property or method "json" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
(found in root instance)
I also tried solution from forum: https://laracasts.com/discuss/channels/vue/use-a-filter-custom-filter-in-v-html-property?page=1
<p v-html="this.$options.filters.json(description)"></p>
It shows error:
[Vue warn]: Error when rendering root instance:
vue.js:3063 Uncaught TypeError: Cannot read property 'filters' of undefined
at eval (eval at makeFunction (vue.js:8260), <anonymous>:2:2975)
at Proxy.renderList (vue.js:3158)
at Proxy.eval (eval at makeFunction (vue.js:8260), <anonymous>:2:2169)
at Vue$3.Vue._render (vue.js:3054)
at Vue$3.<anonymous> (vue.js:2430)
at Watcher.get (vue.js:1661)
at new Watcher (vue.js:1653)
at Vue$3.Vue._mount (vue.js:2429)
at Vue$3.$mount (vue.js:6000)
at Vue$3.$mount (vue.js:8327)
What's the correct way to do this on VueJS2?

Answer 1

For completeness, in Vue 2 you have some options, like:
v-html="$options.filters.FILTERNAME(args)" or
:inner-html.prop="args | FILTERNAME" or
v-html="METHODNAME(args)", if you create a method.
For Vue 3, filters are no longer supported. So the only options are method (or a computed prop).
More info in the demos below.
Vue 2:
function json(text) {
// do your magic
return text.toUpperCase(); // just for demo
}
Vue.filter('json', function (value) {
return json(value);
})
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
methods: {
jsonMethod(v) {
return json(v); // create a "proxy" to the outer function
}
}
})
<script src="https://unpkg.com/vue#2"></script>
<div id="app">
<p v-html="$options.filters.json(message)"></p>
<p :inner-html.prop="message | json"></p>
<p v-html="jsonMethod(message)"></p>
</div>
Vue 3:
In Vue.js 3 filters are no longer supported. Therefore the only options left is to use a method or a computed property:
function json(text) {
// do your magic
return text.toUpperCase(); // just for demo
}
const { createApp } = Vue
createApp({
data() {
return {
message: 'Hello Vue.js!'
}
},
methods: {
jsonMethod(v) {
return json(v); // create a "proxy" to the outer function
}
},
computed: {
transformedMessage() {
return json(this.message)
}
}
}).mount('#app')
<script src="https://unpkg.com/vue#3/dist/vue.global.js"></script>
<div id="app">
<p v-html="jsonMethod(message)"></p>
<p v-html="transformedMessage"></p>
</div>

Answer 2

For me, as #acdcjunior pointed out, this worked:
<p v-html="$options.filters.json(description)"></p>
Besides that, I had two filters to apply, and it also worked:
<p v-html="$options.filters.filter1($options.filters.filter2(description))"></p>

Answer 3

The issue is that your HTML is processed before the filter is added to your Vue instance. Try like this:
JSFiddle
var jsonFormatter = function(json){
if( typeof json!='string' ) json = JSON.stringify( json, null, 2 );
json = json.replace( /</g, '<' ).replace( />/g, '>' ); // replace(/&/g, '&')
var pattern = /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g;
var html = json.replace( pattern, function( match ) {
var cls = 'number';
var suffix = '';
if( /^"/.test( match ) ) {
if( /:$/.test( match ) ) {
cls = 'key';
match = match.slice( 0, -1 );
suffix = ':'
} else {
cls = 'string';
}
} else if( /true|false/.test( match ) ) {
cls = 'boolean';
} else if( /null/.test( match ) ) {
cls = 'null';
}
return '<span class="' + cls + '">' + match + '</span>' + suffix;
} );
return html;
}
new Vue({
el: '#app',
data(){
return {
jsonData: {dog: 'woof', nestedObject: {cat: 'meow'}}
}
},
filters: {
jsonFormatter: jsonFormatter
}
});
//Vue.filter( 'jsonFormatter', jsonFormatter ); // Doesn't work becuase happens after html is processed
<div id="app" class="container">
<h1>
v-html directive
</h1>
<div v-html="this.$options.filters.jsonFormatter(jsonData)"></div>
</div>

Answer 4

If you're just displaying the data then create a method:
json(jsonable) {
return jsonedValue;
}
then in the html
<div v-html="json(mydata)"></div>