美化 json 字符串 vuejs2 webpack

Question

我尝试将我的 json 字符串过滤成 JSON 高亮语法或有点像带有前置元素标签的 json 美化。我不想要一个树 json 查看器，只想要一个漂亮的 JSON 语法高亮。

模板

<div id="app">
  <pre>{{{ json | jsonPretty }}}</pre>
</div>

vue

var vm = new Vue({
  el: '#app',
  data() {
    return {
      json:'{ "name: "John Doe" }'
    }
  },
  filters: {
    jsonPretty: function(value) {
      let json = JSON.stringify(JSON.parse(value), null, 2)
      json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
      return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+]?\d+)?)/g, function(match) {
        var cls = 'number'
        if (/^"/.test(match)) {
          if (/:$/.test(match)) {
            cls = 'key'
          } else {
            cls = 'string'
          }
        } else if (/true|false/.test(match)) {
          cls = 'boolean'
        } else if (/null/.test(match)) {
          cls = 'null'
        }
        return '<span class="' + cls + '">' + match + '</span>'
      })
    }
  }
});

CSS

pre {
  outline: 1px solid #ccc;
  padding: 15px; 
  margin: 5px;
  background: white;
 }
.string { color: green; }
.number { color: darkorange; }
.boolean { color: blue; }
.null { color: magenta; }
.key { color: red; }

我尝试使用 jsfiddle，它正在工作，但是当我尝试使用 webpack 官方 vuejs 模板时，它显示错误

ERROR in ./~/vue-loader/lib/template-compiler?{"id":"data-v-4b8ecaca","hasScoped":true,"transformToRequire":{"video":"src","source":"src","img":"src","image":"xlink:href"}}!./~/vue-loader/lib/selector.js?type=template&index=0!./src/components/Hello.vue
(Emitted value instead of an instance of Error) 
  Error compiling template:

  <div class="hello">
    <div class="">

      <pre>{{{ json | jsonPretty }}}</pre>
    </div>
  </div>

  - invalid expression: {{{ json | jsonPretty }}}

 @ ./src/components/Hello.vue 10:2-300
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
 @ ./src/App.vue
 @ ./src/main.js
 @ multi ./build/dev-client ./src/main.js

编辑：添加 jsfiddle 链接

https://jsfiddle.net/Ljck1wmL/5/

Answer 1

我找不到任何关于 {{{ html }}} 语法的文档。根据official documentation，你应该使用v-html指令。

此外，Vue 2.x 过滤器仅在 mustache 和 v-bind 表达式中可用。 You cannot use a filter in v-html.

对于其他任何事情，您都应该使用计算属性或方法。

<pre v-html="prettyAreaData"></pre>

和

computed: {
  prettyAreaData: function() {
    var value = this.areaData;
    // and so on with the rest of your function

我已更新您的 JSFiddle 以使用 Vue 2.x，我假设您在本地使用它。我还将 data 函数修复为普通对象。

https://jsfiddle.net/Ljck1wmL/7/