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 :

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 :

• javascript
• vue.js
• vuejs2
• vuetify.js

• stackoverflow./a/7220510 – Adam Jeliński Commented Feb 7, 2022 at 22:31

1 Answer 1

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

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