• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Laravel Vue CRUD Example

Kepala Suku

Web & Mobile Developer
Staff member
#1
Below is an example of working code for creating CRUD using vue on Laravel.
JavaScript:
<script>
    var csrtToken = ''
    export default {
        data() {
            return {
                data: [],
                errors: [],
                isInsert: true,
                User: {id: null, name: null, email: null, password: null}
            }
        },
        created() {
            this.init()
        },
        methods: {
            create: function () {
                this.User = {}
                $("#modal-add").modal()
                this.isInsert = true
            },
            init: function () {
                axios.get('/user/data')
                    .then(response => {
                        // JSON responses are automatically parsed.
                        this.data = response.data
                    })
                    .catch(e => {
                        this.errors.push(e)
                    })
            },
            store: function (data) {
                data._token = csrtToken
                axios.post('/user/store', data)
                    .then(response => {
                        // JSON responses are automatically parsed.
                        $("#modal-add").modal("hide")
                        this.init()
                    })
                    .catch(e => {
                        this.errors.push(e)
                    })

            },
            editItem: function (data) {
                this.User = data
                this.isInsert = false
                $("#modal-add").modal()
            },
            updateItem: function(item){
                if(!confirm("Kamu yakin mau mengedit "+item.name+"?"))return
                item._token = csrtToken
                axios.post('/user/update', item)
                    .then(response => {
                        this.init()
                        $("#modal-add").modal("hide")
                        this.User = {}
                    })
            },
            deleteItem: function (item) {
                if(!confirm("Kamu yakin mau menghapus "+item.name+"?"))return
                item._token = csrtToken
                axios.post('/user/delete', item)
                    .then(response => {
                        this.init()
                        this.User = {}
                    })
            }
        }
    }
</script>