working on select components

vue3/src/pages/MealPlanPage.vue

@@ -1,23 +1,36 @@
 <template>
+    <v-container>
+        <v-row>
+            <v-col>
+                <v-card>
+                    <v-card-text>
+                        multiple food
+                        <model-select model="Food" allow-create clearable></model-select>
+                        single food
+                        <model-select model="Food" :multiple="false" allow-create clearable></model-select>
+                        multiple keyowrd
+                        <model-select model="Keyword" allow-create clearable></model-select>
 
-  <model-select model="Food" allow-create clearable></model-select>
+                        <v-autocomplete></v-autocomplete>
+                    </v-card-text>
+                </v-card>
+            </v-col>
+        </v-row>
+    </v-container>
 
 
-  <model-select model="Food" :multiple="false" allow-create clearable></model-select>
-
 </template>
 
 <script lang="ts">
 import {defineComponent} from 'vue'
 import ModelSelect from "@/components/inputs/ModelSelect.vue";
 
+
 export default defineComponent({
     name: "MealPlanPage",
     components: {ModelSelect},
-    data(){
-        return {
-
-        }
+    data() {
+        return {}
     }
 })
 </script>

vue3/src/pages/RecipeEditPage.vue

@@ -110,7 +110,9 @@ export default defineComponent({
 
         const api = new ApiApi()
         api.apiKeywordList({page: 1, pageSize: 100}).then(r => {
-            this.keywords = r.results
+            if(r.results){
+                this.keywords = r.results
+            }
         })
     },
     methods: {