Collapsible json in card //dashboard2

Dashboard
1

Hello,

can somebody help me how to create collapsible json (just like in editor debug section) under vuetify card?

<template>
  <v-card class="mx-auto" max-width="344">
    <v-card-title>JSON </v-card-title>

    <v-card-subtitle> Data inside </v-card-subtitle>

    <v-card-actions>
      <v-btn color="orange-lighten-2" text="Explore"></v-btn>

      <v-spacer></v-spacer>

      <v-btn
        :icon="show ? 'mdi-chevron-up' : 'mdi-chevron-down'"
        @click="show = !show"
      ></v-btn>
    </v-card-actions>

    <v-expand-transition>
      <div v-show="show">
        <v-divider></v-divider>

        <v-card-text>
          <pre>
{{ 
            [
            {
                "Name": "TiStRcv",
                "SymbolicDataBlockAddress": "MDA.TiStRcv",
                "DisplayName": "module data interface",
                "Type": "DATETIME",
                "Description": "time stamp \"data recieved\"",
                "AddressOffset": 16,
                "SpotKey": "536d9a7d-f965-ed55-3e6b-512533c473e5",
                "ModuleDB": {
                    "Name": "SCADA"
                }
            },
            {
                "Name": "TiStSnd",
                "SymbolicDataBlockAddress": "MDA.TiStSnd",
                "DisplayName": "module data interface",
                "Type": "DATETIME",
                "Description": "time stamp \"data sent\"",
                "AddressOffset": 24,
                "SpotKey": "9d350d80-1305-e0bf-50b1-309f0318771d",
                "ModuleDB": {
                    "Name": "SCADA"
                }
            }]
 }}</pre >
        </v-card-text>
      </div>
    </v-expand-transition>
  </v-card>
</template>

<script>
  export default {
    data: () => ({
      show: false,
    }),
  }
</script>
just formats JSON, but some might become very big so I would like to be able to make them collapsable:

something like this: jsonview demo GitHub - pgrabovets/json-view: This is a javascript library for displaying json data into a DOM.

I couldn't merge them together

2

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.