0
189
VistasDisplay pretty print of JSON in Vue.js
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 :
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
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.
·
Juan Pablo Isaza
Denunciar
Responde la pregunta