フィルタ付きVueJS2 v-html

Question

フィルタ付きの生のhtmlを表示する方法は？

私はこのようなものがあります：

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

をし、それらにこのようなものを使用します。

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

をそれは警告を表示して間違って表示：ルートで見つかった

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. 

を（インスタンス）

私もフォーラムから解決しようとした：それはエラーを示し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> 

を：

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

VueJS2上でこれを行うための正しい方法は何ですか？

Answer 1

問題は、フィルタがVueインスタンスに追加される前にHTMLが処理されることです。あなただけのデータを表示している場合、メソッド作成 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

：私はHTMLで、その後

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