fix: 500 error on recipe share link (#5627)

frontend/components/Domain/Recipe/RecipeAssets.vue

@@ -1,23 +1,23 @@
 <template>
-  <div v-if="value.length > 0 || edit">
+  <div v-if="model.length > 0 || edit">
     <v-card class="mt-4">
       <v-card-title class="py-2">
         {{ $t("asset.assets") }}
       </v-card-title>
       <v-divider class="mx-2" />
       <v-list
-        v-if="value.length > 0"
+        v-if="model.length > 0"
         :flat="!edit"
       >
         <v-list-item
-          v-for="(item, i) in value"
+          v-for="(item, i) in model"
           :key="i"
         >
           <template #prepend>
             <div class="ma-auto">
               <v-tooltip bottom>
-                <template #activator="{ props }">
-                  <v-icon v-bind="props">
+                <template #activator="{ props: tooltipProps }">
+                  <v-icon v-bind="tooltipProps">
                     {{ getIconDefinition(item.icon).icon }}
                   </v-icon>
                 </template>
@@ -44,7 +44,7 @@
                 color="error"
                 icon
                 top
-                @click="value.splice(i, 1)"
+                @click="model.splice(i, 1)"
               >
                 <v-icon>{{ $globals.icons.delete }}</v-icon>
               </v-btn>
@@ -113,13 +113,12 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { useStaticRoutes, useUserApi } from "~/composables/api";
 import { alert } from "~/composables/use-toast";
 import type { RecipeAsset } from "~/lib/api/types/recipe";
 
-export default defineNuxtComponent({
-  props: {
+const props = defineProps({
   slug: {
     type: String,
     required: true,
@@ -128,17 +127,14 @@ export default defineNuxtComponent({
     type: String,
     required: true,
   },
-    modelValue: {
-      type: Array as () => RecipeAsset[],
-      required: true,
-    },
   edit: {
     type: Boolean,
     default: true,
   },
-  },
-  emits: ["update:modelValue"],
-  setup(props, context) {
+});
+
+const model = defineModel<RecipeAsset[]>({ required: true });
+
 const api = useUserApi();
 
 const state = reactive({
@@ -216,21 +212,10 @@ export default defineNuxtComponent({
     file: state.fileObject,
     extension: state.fileObject.name.split(".").pop() || "",
   });
-
-      context.emit("update:modelValue", [...props.modelValue, data]);
+  if (data) {
+    model.value = [...model.value, data];
+  }
   state.newAsset = { name: "", icon: "mdi-file" };
   state.fileObject = {} as File;
 }
-
-    return {
-      state,
-      addAsset,
-      assetURL,
-      assetEmbed,
-      getIconDefinition,
-      iconOptions,
-      setFileObject,
-    };
-  },
-});
 </script>