fahad's avatar
Level 7

How to delete an Object form the component properties when clicking a button

Hi,

I am trying to make the delete functionality using vue component. this is what i have done so far:

// here is my CategoryController

class CategoryController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        
        $categories =  Category::all()->take(5);
        return view('admin.category.categories')->with(compact('categories'));

    }

}


            <!-- calling my components and passing the $categories variable that was returned from 
the CategoryController -->


                        <div class="row">
                            <example :categories = "{{ $categories }}"></example>
                        </div>

And here is my Example.vue file looks like::

<template>
    <table class="table table-condensed table-bordered">
        <thead class="text-primary">
        <tr>
            <th>#</th>
            <th>name</th>
            <th colspan="2">Actions</th>
        </tr>
        </thead>
        <tbody>

        <tr v-for="category in categories">

            <td>{{ category.id }}</td>
            <td>{{ category.name }}</td>
            <td>
                <a :href="category.id"
                   class="btn-link"
                   data-toggle="modal"
                   data-target="#category-edit-modal"
                >
                    <i class="icon material-icons">edit</i>
                </a>
            </td>

            <td><a :href="category.id" @click.prevent="deleteCategory(category.id)"><i class="icon material-icons">delete</i></a></td>

        </tr>

        </tbody>
    </table>
</template>

<script>
    export default {

        props: ['categories'],
        data: function(){
                return {

                };
        },
        methods: {
            deleteCategory: function(id){

                var category = this.categories.find(function(category){

                if(category.id == id){

                   // i want to remove this category, how ??
                }

                });

            }

        }
    }
</script>



any help is highly appreciated.

With Thanks, Fahad

0 likes
0 replies

Please or to participate in this conversation.