recipeComments script setup and use defineModel

frontend/components/Domain/Recipe/RecipePage/RecipePage.vue

@@ -76,7 +76,7 @@
       <WakelockSwitch />
       <RecipePageComments
         v-if="!recipe.settings.disableComments && !isEditForm && !isCookMode"
-        :recipe="recipe"
+        v-model="recipe"
         class="px-1 my-4 d-print-none"
       />
       <RecipePrintContainer :recipe="recipe" :scale="scale" />

frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageComments.vue

@@ -82,7 +82,7 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import { useUserApi } from "~/composables/api";
 import type { Recipe } from "~/lib/api/types/recipe";
 import UserAvatar from "~/components/Domain/User/UserAvatar.vue";
@@ -90,48 +90,29 @@ import type { NoUndefinedField } from "~/lib/api/types/non-generated";
 import { usePageUser } from "~/composables/recipe-page/shared-state";
 import SafeMarkdown from "~/components/global/SafeMarkdown.vue";
 
-export default defineNuxtComponent({
-  components: {
-    UserAvatar,
-    SafeMarkdown,
-  },
-  props: {
-    recipe: {
-      type: Object as () => NoUndefinedField<Recipe>,
-      required: true,
-    },
-  },
-  setup(props) {
-    const api = useUserApi();
+const recipe = defineModel<NoUndefinedField<Recipe>>({ required: true });
+const api = useUserApi();
+const { user } = usePageUser();
+const comment = ref("");
 
-    const { user } = usePageUser();
-
-    const state = reactive({
-      comment: "",
-    });
-
-    async function submitComment() {
+async function submitComment() {
   const { data } = await api.recipes.comments.createOne({
-        recipeId: props.recipe.id,
-        text: state.comment,
+    recipeId: recipe.value.id,
+    text: comment.value,
   });
 
   if (data) {
-        props.recipe.comments.push(data);
+    recipe.value.comments.push(data);
   }
 
-      state.comment = "";
-    }
+  comment.value = "";
+}
 
-    async function deleteComment(id: string) {
+async function deleteComment(id: string) {
   const { response } = await api.recipes.comments.deleteOne(id);
 
   if (response?.status === 200) {
-        props.recipe.comments = props.recipe.comments.filter(comment => comment.id !== id);
+    recipe.value.comments = recipe.value.comments.filter(comment => comment.id !== id);
   }
-    }
-
-    return { api, ...toRefs(state), submitComment, deleteComment, user };
-  },
-});
+}
 </script>