ObjectItem.vue 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. <template>
  2. <div @click.stop="toggle()" class="object-container" :class="{ 'toggled-off': toggledOff }">
  3. <div v-if="isObject(item) && !toggledOff">
  4. <p v-for="(value, name) in item">
  5. <b>{{ name }}</b>:
  6. <object-item :item="value" v-if="isArray(value) || isObject(value)"/>
  7. <span v-else>{{ value }}</span>
  8. </p>
  9. </div>
  10. <div v-if="isArray(item) && !toggledOff">
  11. <p v-for="(value, index) in item">
  12. <b>{{ index }}</b>
  13. <object-item :item="value" v-if="isArray(value) || isObject(value)"/>
  14. <span v-else>{{ value }}</span>
  15. </p>
  16. </div>
  17. </div>
  18. </template>
  19. <script>
  20. import ObjectItem from './ObjectItem.vue';
  21. export default {
  22. components: { ObjectItem },
  23. name: "ObjectItem",
  24. data: () => {
  25. return {
  26. toggledOff: false
  27. }
  28. },
  29. computed: {
  30. },
  31. props: {
  32. item: [Object, Array]
  33. },
  34. methods: {
  35. isObject(item) {
  36. return typeof item === "object" && item !== null && !Array.isArray(item);
  37. },
  38. isArray(item) {
  39. return Array.isArray(item);
  40. },
  41. toggle() {
  42. this.toggledOff = !this.toggledOff;
  43. }
  44. },
  45. mounted() {
  46. }
  47. };
  48. </script>
  49. <style lang="scss" scoped>
  50. .object-container {
  51. padding-left: 25px;
  52. border: 1px solid black;
  53. margin-right: -1px;
  54. margin-bottom: -1px;
  55. &.toggled-off {
  56. padding: 10px;
  57. &::before {
  58. content: "Click to show";
  59. }
  60. }
  61. }
  62. </style>