在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)
    }
  }
}

使用 CSS white-space或簡單地使用<pre>標記來保持模板中的格式

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

演示 ~ https://jsfiddle.net/ktz49q1h/

---

請注意，Vue3 不支持過濾器。 請參閱解決方案的遷移策略。