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> Just to make my point clear, I'm hoping to see something like this :
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.
