diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/keep_alive_slots.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/keep_alive_slots.vue | 51 |
1 files changed, 51 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/components/keep_alive_slots.vue b/app/assets/javascripts/vue_shared/components/keep_alive_slots.vue new file mode 100644 index 00000000000..d68c4399275 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/keep_alive_slots.vue @@ -0,0 +1,51 @@ +<script> +export default { + props: { + slotKey: { + type: String, + required: false, + default: '', + }, + }, + data() { + return { + aliveSlotsLookup: {}, + }; + }, + computed: { + aliveSlots() { + return Object.keys(this.aliveSlotsLookup); + }, + }, + watch: { + slotKey: { + handler(val) { + if (!val) { + return; + } + + this.$set(this.aliveSlotsLookup, val, true); + }, + immediate: true, + }, + }, + methods: { + isCurrentSlot(key) { + return key === this.slotKey; + }, + }, +}; +</script> + +<template> + <div> + <div + v-for="slot in aliveSlots" + v-show="isCurrentSlot(slot)" + :key="slot" + class="gl-h-full gl-w-full" + > + <slot :name="slot"></slot> + </div> + </div> +</template> |