codekerala/spa-laravel-vuejs

Adding Delete button on Grid

Opened this issue · 0 comments

I want to add a button for deleting data on Customer (and Invoice) grid by adding remove() method in DataViewer.vue first:

methods: {
    ...
    remove(id) {
        if (confirm('Are you sure you want to delete this item?') == true) {
            var vm = this
            axios.delete('api/customer/' + id)
                .then(function(response) {
                    if(response.data.deleted) {
                        this.fetchData()
                    }
                })
                .catch(function(error) {
                    console.log(error)
                })
        }                
    },    
    fetchData() {
        var vm = this

        axios.get(this.buildURL())
            .then(function(response) {
                Vue.set(vm.$data, 'model', response.data.model)
            })
            .catch(function(error) {
                console.log(error)
            })
    }    
}

However, how to call the remove() method in index.vue?

<tr>
    <td>{{props.item.company}}</td>
    <td>{{props.item.name}}</td>
    <td>{{props.item.email}}</td>
    <td>        
        <a @click="remove(props.item.id)"><i class="glyphicon glyphicon-remove"></i></a>
    </td>
</tr>

Can we pass props in this application?