ImageModal v-model

ui/src/App.vue

@@ -6,20 +6,16 @@
 
       <CalendarDoor v-for="(_, index) in 24" :key="index" :day="index" />
     </div>
-
-    <ImageModal />
   </div>
 </template>
 
 <script lang="ts">
 import { Options, Vue } from "vue-class-component";
 import CalendarDoor from "./components/CalendarDoor.vue";
-import ImageModal from "./components/ImageModal.vue";
 
 @Options({
   components: {
     CalendarDoor,
-    ImageModal,
   },
 })
 export default class App extends Vue {}

ui/src/components/CalendarDoor.vue

@@ -1,23 +1,26 @@
 <template>
-  <a
-    class="button"
-    :href="'http://localhost:8000/api/days/picture/' + day"
-    target="_blank"
-  >
+  <ImageModal v-model="modal_visible" />
+
+  <button class="button" @click="modal_visible = true">
     Türken {{ day + 1 }}
-  </a>
+  </button>
 </template>
 
 <script lang="ts">
 import { Vue, Options } from "vue-class-component";
+import ImageModal from "./ImageModal.vue";
 
 @Options({
+  components: {
+    ImageModal,
+  },
   props: {
     day: Number,
   },
 })
 export default class CalendarDoor extends Vue {
   day!: number;
+  modal_visible = false;
 }
 </script>
 

ui/src/components/ImageModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="modal is-active" v-if="visible" @click="hide">
+  <div class="modal is-active" v-if="modelValue" @click="hide">
     <div class="modal-background" />
 
     <div class="modal-content">
@@ -8,15 +8,18 @@
       <!-- </p> -->
     </div>
   </div>
-
-  <button class="button" @click="show">modal</button>
 </template>
 
 <script lang="ts">
-import { Vue } from "vue-class-component";
+import { Options, Vue } from "vue-class-component";
 
+@Options({
+  props: {
+    modelValue: Boolean,
+  },
+})
 export default class ImageModal extends Vue {
-  visible = false;
+  modelValue!: boolean;
 
   public created(): void {
     window.addEventListener("keydown", (e) => {
@@ -24,12 +27,8 @@ export default class ImageModal extends Vue {
     });
   }
 
-  private show(): void {
-    this.visible = true;
-  }
-
   private hide(): void {
-    this.visible = false;
+    this.$emit("update:modelValue", false);
   }
 }
 </script>