From 80be6363847e7be5d0ddf5c922e8a487def6dd57 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Sat, 19 Dec 2020 15:48:47 +0100
Subject: [PATCH] refactor: :recycle: move v-model up one layer

---
 src/components/Header.vue     |  2 +-
 src/components/NsfwSwitch.vue | 13 +++++++++++--
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/Header.vue b/src/components/Header.vue
index 6d7813f..18c1794 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -5,7 +5,7 @@
         <div>
           If you wish to see NSFW content on this page flip this switch.
         </div>
-        <nsfw-switch />
+        <nsfw-switch v-model="$parent.nsfw" />
       </div>
     </div>
 
diff --git a/src/components/NsfwSwitch.vue b/src/components/NsfwSwitch.vue
index c3b3557..822a9f3 100644
--- a/src/components/NsfwSwitch.vue
+++ b/src/components/NsfwSwitch.vue
@@ -3,7 +3,8 @@
     <div>😇</div>
     <div class="toggle-wrap">
       <input
-        v-model="$parent.$parent.nsfw"
+        :checked="checked"
+        @change="$emit('change', $event.target.checked)"
         type="checkbox"
         name="nsfw"
         id="nsfw-switch"
@@ -15,7 +16,15 @@
 </template>
 
 <script>
-export default {};
+export default {
+  model: {
+    prop: "checked",
+    event: "change"
+  },
+  props: {
+    checked: Boolean
+  }
+};
 </script>
 
 <style lang="scss">