Feb 3, 2017
0
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
Please or to participate in this conversation.