71

Author: kossiecoder

db.json

@@ -44,16 +44,6 @@
       "subject": "12",
       "completed": true,
       "id": 15
-    },
-    {
-      "subject": "123",
-      "completed": true,
-      "id": 16
-    },
-    {
-      "subject": "1234",
-      "completed": false,
-      "id": 17
     }
   ]
 }

src/components/DeleteModal.vue

@@ -25,12 +25,14 @@
 
 <script>
 import Modal from '@/components/Modal.vue';
+import { useContext } from 'vue';
 
 export default {
     components: {
         Modal
     },
-    setup(props, { emit }) {
+    setup() {
+        const { emit } = useContext();
         const onClose = () => {
             emit('close');
         }

src/components/Input.vue

@@ -17,6 +17,7 @@
 </template>
 
 <script>
+import { useContext } from 'vue';
 export default {
     props: {
         label: {
@@ -32,7 +33,8 @@ export default {
             required: true
         }
     },
-    setup(props, { emit }) {
+    setup() {
+        const { emit } = useContext();
         const onInput = (e) => {
             emit('update:subject', e.target.value);
         };

src/components/Modal.vue

@@ -22,8 +22,11 @@
 </template>
 
 <script>
+import { useContext } from 'vue';
+
 export default {
-    setup(props, { emit }) {
+    setup() {
+        const { emit } = useContext();
         const onClose = () => {
             emit('close');
         }

src/components/TodoSimpleForm.vue

@@ -25,11 +25,12 @@
 </template>
 
 <script>
-    import { ref } from 'vue';
+    import { ref, useContext } from 'vue';
 
     export default {
         emits: ['add-todo'],
-        setup(props, { emit }) {
+        setup() {
+            const { emit } = useContext();
             const todo = ref('');
             const hasError = ref(false);
             const onSubmit = () => {