optimization for dynamic

1 files changed, 12 insertions, 7 deletions

diff --git a/src/components/_sila/Global/Collapse.vue b/src/components/_sila/Global/Collapse.vue
index 36778571..280e769b 100644
--- a/src/components/_sila/Global/Collapse.vue
+++ b/src/components/_sila/Global/Collapse.vue
@@ -4,13 +4,12 @@
       v-b-toggle="id"
       variant="collapse"
       class="d-flex flex-nowrap justify-content-start"
-      @click="onClick"
     >
       <slot name="image"></slot>
       {{ title }}
       <component :is="iconChevronUp" class="icon-expand" />
     </b-button>
-    <b-collapse :id="id" visible>
+    <b-collapse :id="id" v-model="visible">
       <slot></slot>
     </b-collapse>
   </div>
@@ -29,18 +28,24 @@ export default {
       type: String,
       default: null,
     },
+    opened: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
-      opened: true,
+      visible: false,
       iconChevronUp: iconChevronUp,
     };
   },
-  methods: {
-    onClick() {
-      this.opened = !this.opened;
-      this.$emit('opened', this.opened);
+  watch: {
+    visible() {
+      this.$emit('opened', this.visible);
     },
   },
+  created() {
+    this.visible = this.opened;
+  },
 };
 </script>