VueJS2 v-html mit Filter

Question

Wie man rohe HTML mit Filter anzeigt?

Ich habe so etwas wie dies:

K.json = function(json) { 
    if(typeof json!='string') json = JSON.stringify(json, null, 2); 
    json = json.replace(/</g, '&lt;').replace(/>/g, '&gt;'); // replace(/&/g, '&amp;') 
    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); 

Und sie so etwas wie folgt verwenden:

<div v-html="thecolumn | json"></div> 

Es zeigt eine Warnung und falsch angezeigt:

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. 

(in Wurzel gefunden Beispiel)

ich auch Lösung von Forum versucht: 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> 

Es zeigt Fehler:

[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) 

Was ist der richtige Weg, dies auf VueJS2 zu tun?

Answer 1

Das Problem ist, dass Ihr HTML verarbeitet wird, bevor der Filter Ihrer Vue-Instanz hinzugefügt wird. Versuchen Sie wie folgt aus: JSFiddle

var jsonFormatter = function(json){ 
 
    if(typeof json!='string') json = JSON.stringify(json, null, 2); 
 
    json = json.replace(/</g, '&lt;').replace(/>/g, '&gt;'); // replace(/&/g, '&amp;') 
 
    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 { 
 
     \t jsonData: {dog: 'woof', nestedObject: {cat: 'meow'}} 
 
     } 
 
    }, 
 
    filters: { 
 
    \t 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 2

Wenn Sie nur die Daten angezeigt werden dann eine Methode erstellen:

json(jsonable) { 
    return jsonedValue; 
} 

dann im html

<div v-html="json(mydata)"></div>