Fix bugs, vue-json-pretty package

resources/js/Pages/Superuser/Activity/Logging.vue

@@ -4,6 +4,7 @@ import Card from '@/Components/Card.vue';
 import Icon from '@/Components/Icon.vue';
 import Builder from '@/Components/DataTable/Builder.vue';
 import Th from '@/Components/DataTable/Th.vue';
+import VueJsonPretty from "vue-json-pretty";
 </script>
 
 <template>
@@ -99,7 +100,7 @@ import Th from '@/Components/DataTable/Th.vue';
                 </td>
 
                 <td class="px-2 py-1 border border-inherit ">
-                  {{ rec.context }}
+                    <vue-json-pretty :data="JSON.parse(rec.context)" />
                 </td>
 
                 <td class="px-2 py-1 border border-inherit ">
@@ -113,3 +114,8 @@ import Th from '@/Components/DataTable/Th.vue';
     </Card>
   </DashboardLayout>
 </template>
+
+<style>
+@import 'vue-json-pretty/lib/styles.css';
+</style>
+