在 Vue.js 中显示 JSON 的漂亮打印

Question

我想知道人们如何在 Vue.js 中显示漂亮的 JSON 打印

<v-expansion-panels>
  <v-expansion-panel v-for="(entrie, i) in objects.log.entries" :key="i">
    <v-expansion-panel-header class="text-left">

      {{ entrie.request.postData.text }}
    </v-expansion-panel-header>
    <v-expansion-panel-content class="green--text">

      {{ entrie.response.content.text }}

    </v-expansion-panel-content>
  </v-expansion-panel>
</v-expansion-panels>

小提琴

为了明确我的观点，我希望看到这样的事情：

Answer 1

您可以添加过滤器以更好的格式对数据进行字符串化。

filters: {
  pretty: (val, indent = 2) => {
    if (typeof val !== "object") {
      try {
        val = JSON.parse(val)
      } catch (err) {
        console.warn("value is not JSON")
        return val
      }
     
      return JSON.stringify(val, null, indent)
    }
  }
}

使用 CSSwhite-space或仅使用<pre>标签来保持模板中的格式

<pre>{{ entrie.response.content.text | pretty(4) }}</pre>

演示 ~ https://jsfiddle.net/ktz49q​​1h/

请注意，Vue3 不支持过滤器。请参阅迁移策略以获取解决方案。