Delete data in vue

i have delete button like this, that i found in youtube. but whenever i click the button im getting error Uncaught TypeError: $setup.destroy is not a function


<button @click="destroy(post.id)"
   class=" px-2 py-1 bg-red-600 text-white rounded hover:bg-red-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 font-bold uppercase ms-auto"
   type="button">Delete</button>
<script>
   export default {
       name: 'PostIndex',
   
       props: {
           posts: {
               type: Array,
               // required: true,
           },
       },
   
       setup() {
           const destroy = (id) => {
               if (confirm('Are you sure you want to delete this post?')) {
                   router.delete(route('posts.destroy', id));
               }
           };
   
           return {
               destroy,
           };
       }
   };
</script>

tisuchi

2 years ago

Level 70

@chaeril Can you try this?

import axios from 'axios';

// Inside destroy function
axios.delete(`/path/to/delete/post/${id}`)
     .then(response => {
         console.log("Deleted successfully!");
         // maybe remove post from the list or navigate elsewhere
     })
     .catch(error => {
         console.error("Error deleting the post:", error);
     });

Chaeril

2 years ago

Level 1

<script setup>
import { router } from '@inertiajs/vue3'

const props = defineProps({
    post: Object,
});

const handleLike = (id) => {
    router.post(route('posts.like', id));
};

const handleDislike = (id) => {
    router.post(route('posts.dislike', id));
};
</script>

seems i was suppose to put the function in the script setup instead of setup(). or maybe the main cause that i used both in same file

Please or to participate in this conversation.