Display pretty print of JSON in Vue.js

Question

I wonder how do people display pretty print of JSON in Vue.js

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

Fiddle

Just to make my point clear, I'm hoping to see something like this :

stackoverflow.com/a/7220510

Adam Jeliński
– Adam Jeliński

2022-02-07 22:31:09 +00:00
Commented Feb 7, 2022 at 22:31 — Adam Jeliński
– Adam Jeliński, Commented Feb 7, 2022 at 22:31

tony19 · Accepted Answer · 2022-09-06 19:11:32Z

6

You can add a filter to stringify the data in a nicer format.

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

Use CSS white-space or simply use a <pre> tag to keep formatting in your template

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

Demo ~ https://jsfiddle.net/ktz49q1h/

Note that filters are not supported in Vue3. See the migration strategy for solutions.

edited Sep 6, 2022 at 19:11

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Feb 7, 2022 at 22:37

Phil

166k25 gold badges265 silver badges269 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Display pretty print of JSON in Vue.js

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related