I am having trouble with the delete function of my table items. It keeps returning a modal with a value of "1". I tried a lot of possible solutions I saw online but still no luck. Could you please help. Thank you in advance.

Controller

public function destroy($id) { $articleCategories = ArticleCategory::findOrFail($id); $articleCategories->delete(); return redirect()->route('article_categories')->with('message', 'Article category deleted successfully.'); }

Vue

<script> import Title from "../Layouts/Components/Title.vue"; import PaginationLinks from "../../components/PaginationLinks.vue"; import TableEditButton from "../../components/TableEditButton.vue"; import { router, useForm } from "@inertiajs/vue3"; import { ref, watch } from "vue"; const form = useForm({}); const props = defineProps({ articleCategories: Object, }); function destroy(id) { if (confirm("Are you sure you want to delete this record?")) { form.delete(route("article_categories.destroy", { id }), { preserveScroll: true, }); } } </script> <template> <tbody> <tr v-for="articleCategories in articleCategories.data" :key="articleCategories.id" > <td>{{ articleCategories.title }}</td> <td> <div class="flex gap-2 justify-end"> <TableEditButton :href=" route( 'article_categories.edit', articleCategories.id ) " /> <Link href="#" @click="destroy(articleCategories.id)" > Delete </Link> </div> </td> </tr> </tbody> </template>

Ryan Tinamisan's user avatar

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.