I create application with Vue3 laravel and deploy this on AWS. Although My code works well in development, but not work in production. I assume that the promise code brings this problem.

Although I add category(text), new category is not displayed. When I add category again, categories is displayed all together.

deleting is not also working well.

Sometimes, adding or deleting category works fine.

This is my app. http://ec2-18-181-225-61.ap-northeast-1.compute.amazonaws.com/

The below code is vue(promise) code.

// CategoryShow.vue
<script setup>
import axios from "axios";
import { defineProps, onMounted, ref, watch} from "vue"
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()
const props = defineProps({
  categoryId: String,
})
const categories = ref([])
const newCategory = ref('')
const category = ref({})
const recipes = ref([])
const newRecipe = ref('')
let categoryId = parseInt(route.params.categoryId)
const submitNewCategory = () => {
  return new Promise((resolve) => {
    axios.post('/api/categories/store', {
        title: newCategory.value
    })
    resolve();
  })
}
const addCategory = async () => {
    await submitNewCategory()
    const a1 = await getMaxIdCategory()
    categoryId =a1.data.id
    newCategory.value = ''
    router.push({name: 'category.show', params: { categoryId: categoryId }})
}
const deleteCategory = async (id) => {
    if (confirm('Are you sure?'))
    {
        axios.delete('/api/categories/'   id)

        if (categories.value.length === 1) {
            router.push('/')
            return
        }
        // if deleting the same category that is currently displayed on the screen...
        if (categoryId === id)
        {
            let res = await getMaxIdCategory()
            categoryId = res.data.id
            router.push({name: 'category.show', params: { categoryId: categoryId }})
            return
        }
        const res1 = await getCategories()
        categories.value = res1.data
    }
}

const getCategory = () => {
    return axios.get('/api/categories/'   categoryId)
}
const getCategories = () => {
    return axios.get('/api/categories')
}
const getMaxIdCategory = () => {
    return axios.get('/api/max')
}
// ----------------------------
// function relate to recipe
const submitNewRecipe = () => {
    axios.post('/api/categories/'   categoryId   '/recipes/store', {
        title: newRecipe.value
    })
}
const addRecipe = async() => {
    submitNewRecipe()
    const a2 = await getRecipes()
    recipes.value = a2.data
    newRecipe.value = ''
}
const getRecipes = () => {
    return axios.get('/api/categories/'   categoryId   '/recipes/')
}
const getCategoriesAndCategoryAndRecipes = async () => {
    categoryId = parseInt(route.params.categoryId)
    const res1 = await getCategories()
    const res2 = await getCategory()
    const res3 = await getRecipes()
    category.value = res2.data
    recipes.value = res3.data
    categories.value = res1.data
}
getCategoriesAndCategoryAndRecipes()
// -----------------------
onMounted(async () => {
    // getCategoriesAndCategoryAndRecipes()
})
watch(route, async () => {
    if (!isNaN(categoryId))
    {
        getCategoriesAndCategoryAndRecipes()
    }
})
</script>

<template>
    <div >
        <div >
            <h4 style="margin-bottom: 20px; margin-top: 10px">RECIPE HOUSE</h4>
            <form method="post" v-on:submit.prevent="addCategory">
                <input type="text" v-model="newCategory">
            </form>
        </div>
        <ul >
            <li v-for="category in categories" :key="category.id">
                <button  v-on:click="deleteCategory(category.id)">Delete</button>
                <router-link :to="{name: 'category.show', params: {categoryId: category.id }}">
                    <span>{{ category.title }}</span>
                </router-link>
            </li>
        </ul>
    </div>

    <div >
        <span >
            <i ></i>
        </span>
        <div>
            <span>{{ category.title }}</span>
            <!-- <span>{{ currentCategory.title }}</span> -->
            <form method="post" v-on:submit.prevent="addRecipe">
                <input type="text" v-model="newRecipe">
            </form>
            <ul style="margin-top: 15px;">
                <li v-for="recipe in recipes">{{ recipe.title }}</li>
            </ul>
        </div>
    </div>

</template>

getCategories function makes the left screen show categories.

getCategory function makes the right screen show the single category.

getRecipes function makes the right screen show recipes that associate a category

This url is my app's github page. https://github.com/sakamotosora0116/recipehouse_portfolio/tree/master/resources/js/components

Thank you for your help.

CodePudding user response：

I think you are missing the .then on your axios requests. Here is some example:

const submitNewCategory = () => {
    return new Promise((resolve) => {
        axios.post('/api/categories/store', {
            title: newCategory.value
        }).then(response => {
            resolve(response);
        })
    })
}

Using the .then you are waiting for the request to be completed.