fix

Author: r-toki

src/basics/FontAwesomeIcon.vue

@@ -1,7 +1,7 @@
 <template>
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    :class="$props.class"
+    :class="className"
     :viewBox="`0 0 ${width} ${height}`"
   >
     <path fill="currentColor" :d="svgPath" />
@@ -27,7 +27,7 @@ export default defineComponent({
       type: String as PropType<"fas" | "fal" | "far">,
       default: "fas"
     },
-    class: String
+    className: String
   },
 
   setup(props) {

src/components/CreateTodoForm.vue

@@ -6,6 +6,7 @@
       required
       class="form-control px-5 py-4"
       v-model.trim="state.title"
+      @change="$emit('update:newTodoTitle', $event.target.value)"
     />
   </form>
 </template>
@@ -33,20 +34,14 @@ export default defineComponent({
 
   emits: ["update:newTodoTitle"],
 
-  setup(props, context) {
+  setup(props) {
     const state = reactive<State>({ title: props.newTodoTitle });
     watch(
       () => props.newTodoTitle,
       newValue => {
         state.title = newValue;
       }
     );
-    watch(
-      () => state.title,
-      newValue => {
-        context.emit("update:newTodoTitle", newValue);
-      }
-    );
     return { state };
   }
 });

src/components/EditTodoForm.vue

@@ -12,7 +12,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, Ref, ref, onMounted } from "vue";
+import { defineComponent, PropType, ref, onMounted } from "vue";
 import type Todo from "@/models/todo";
 
 export type HandleCancelEdit = () => void;
@@ -36,7 +36,7 @@ export default defineComponent({
 
   setup(props) {
     const todoBeingEdited: Todo = { ...props.todo };
-    const input: Ref<HTMLInputElement | null> = ref(null);
+    const input = ref<HTMLInputElement | null>(null);
     onMounted(() => {
       input.value?.focus();
     });

src/components/TodoItem.vue

@@ -11,11 +11,11 @@
       <span>{{ todo.title }}</span>
     </div>
     <div class="my-n2">
-      <button class="btn px-1 mr-1" @click="handleClickEdit(todo)">
-        <fa icon="edit" class="edit-icon"></fa>
+      <button class="btn px-1 mr-1" @click="handleClickEdit(todo.id)">
+        <FontAwesomeIcon icon="edit" className="edit-icon" />
       </button>
-      <button class="btn px-1" @click="handleClickRemove(todo)">
-        <fa icon="trash" class="trash-icon"></fa>
+      <button class="btn px-1" @click="handleClickRemove(todo.id)">
+        <FontAwesomeIcon icon="trash" className="trash-icon" />
       </button>
     </div>
   </li>
@@ -27,11 +27,11 @@ import { FontAwesomeIcon } from "@/plugins/font-awesome";
 import Todo from "@/models/todo";
 
 export type HandleToggleCompleted = (todo: Todo) => void;
-export type HandleClickEdit = (todo: Todo) => void;
-export type HandleClickRemove = (todo: Todo) => void;
+export type HandleClickEdit = (todoId: string) => void;
+export type HandleClickRemove = (todoId: string) => void;
 
 export default defineComponent({
-  components: { fa: FontAwesomeIcon },
+  components: { FontAwesomeIcon },
 
   props: {
     todo: {

src/components/TodoList.vue

@@ -35,9 +35,10 @@ import type {
 } from "@/components/EditTodoForm.vue";
 
 export type HandleSubmitEditedTodo = (editedTodo: Todo) => void;
+export type { HandleToggleCompleted, HandleClickRemove }
 
 type State = {
-  todoIdBeingEdited: string | null;
+  todoIdBeingEdited?: string;
 };
 
 export default defineComponent({
@@ -64,7 +65,7 @@ export default defineComponent({
 
   setup(props) {
     const state = reactive<State>({
-      todoIdBeingEdited: null,
+      todoIdBeingEdited: undefined,
     });
     const isTodoBeingEdited = (todo: Todo) =>
       todo.id === state.todoIdBeingEdited;
@@ -73,16 +74,17 @@ export default defineComponent({
       editedTodo
     ) => {
       props.handleSubmitEditedTodo(editedTodo);
-      state.todoIdBeingEdited = null;
+      state.todoIdBeingEdited = undefined;
     };
-    const handleClickEdit: HandleClickEdit = (todo) => {
-      state.todoIdBeingEdited = todo.id;
+    const handleClickEdit: HandleClickEdit = (todoId) => {
+      state.todoIdBeingEdited = todoId;
     };
     const handleCancelEdit: HandleCancelEdit = () => {
-      state.todoIdBeingEdited = null;
+      state.todoIdBeingEdited = undefined;
     };
 
     return {
+      state,
       isTodoBeingEdited,
       handleSubmitEditedTodoAndReset,
       handleClickEdit,

src/pages/Index.vue

@@ -21,11 +21,11 @@ import TodoList from "@/components/TodoList.vue";
 import useTodos from "@/composables/use-todos";
 
 import type { HandleSubmitNewTodo } from "@/components/CreateTodoForm.vue";
-import type { HandleSubmitEditedTodo } from "@/components/TodoList.vue";
 import type {
+  HandleSubmitEditedTodo,
   HandleToggleCompleted,
   HandleClickRemove,
-} from "@/components/TodoItem.vue";
+} from "@/components/TodoList.vue";
 
 type State = {
   newTodoTitle: string;
@@ -49,9 +49,8 @@ export default defineComponent({
       const { id, title, completed } = todo;
       updateTodo({ id, title, completed: !completed });
     };
-    const handleClickRemove: HandleClickRemove = (todo) => {
-      const { id } = todo;
-      removeTodo({ id });
+    const handleClickRemove: HandleClickRemove = (todoId) => {
+      removeTodo({ id: todoId });
     };
     const handleSubmitEditedTodo: HandleSubmitEditedTodo = (editedTodo) => {
       const { id, title, completed } = editedTodo;