0
188
ViewsMostrar bonita impresión de JSON en Vue.js
Me pregunto cómo la gente muestra una impresión bonita de JSON en 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>Solo para aclarar mi punto, espero ver algo como esto:
·
Juan Pablo Isaza
1 answers
Answer question0
Puede agregar un filtro para clasificar los datos en un formato más agradable.
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 white-space CSS o simplemente use una etiqueta <pre> para mantener el formato en su plantilla
<pre>{{ entrie.response.content.text | pretty(4) }}</pre>Demostración ~ https://jsfiddle.net/ktz49q1h/
Tenga en cuenta que los filtros no son compatibles con Vue3. Consulte la estrategia de migración para obtener soluciones.
·
Juan Pablo Isaza
Report
Answer question