__checkbox special field problem

[herusdianto]

Thanks for this awesome component Sir, but I have a little problem with __checkbox special field.

1. Without __checkbox & __sequence:
2. With __checkbox only:
3. With __sequence only:
4. With __checkbox & __sequence:

here is my code:

<template>
    <div class="row">
        <div class="col-md-5">
            <div class="form-inline form-group">
                <label>Search:</label>
                <input v-model="search" class="form-control input-sm" @keyup.enter="setFilter">
                <button class="btn btn-primary btn-sm" @click="setFilter">Go</button>
                <button class="btn btn-default btn-sm" @click="resetFilter">Reset</button>
            </div>
        </div>

        <div class="col-md-7">
            <div class="dropdown form-inline pull-right">
                <label>Per Page:</label>

                <select class="form-control input-sm" v-model="perPage">
                    <option value=10>10</option>
                    <option value=25>25</option>
                    <option value=50>50</option>
                    <option value=75>75</option>
                    <option value=100>100</option>
                </select>
            </div>
        </div>
    </div>

    <div class="table-responsive">
        <vuetable
                :api-url="url"
                :pagination-path="paginationPath"
                :fields="fields"
                :sort-order="sortOrder"
                :table-class="tableClass"
                :ascending-icon="ascendingIcon"
                :descending-icon="descendingIcon"
                :item-actions="itemActions"
                :append-params="appendParams"
                :wrapper-class="wrapperClass"
                :table-wrapper="tableWrapper"
                :loading-class="loadingClass"
        ></vuetable>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                url: '/api/students',
                paginationPath: '',
                search: '',
                fields: [
                    {
                        name: '__checkbox',
                        titleClass: 'text-center',
                        dataClass: 'text-center',
                    },
                    {
                        title: 'Number',
                        name: '__sequence',
                        titleClass: 'text-center',
                        dataClass: 'text-center',
                    },
                    {
                        title: 'Avatar',
                        name: 'avatar',
                        titleClass: 'text-center',
                        dataClass: 'text-center',
                    },
                    {
                        title: 'Name',
                        name: 'name',
                        sortField: 'name',
                        titleClass: 'text-center',
                        dataClass: 'text-center',
                    },
                    {
                        title: 'Email',
                        name: 'email',
                        sortField: 'email',
                        titleClass: 'text-center',
                        dataClass: 'text-center',
                    },
                    {
                        title: 'Birth Date',
                        name: 'birth_date',
                        sortField: 'birth_date',
                        titleClass: 'text-center',
                        dataClass: 'text-center',
                    },
                    {
                        title: 'Actions',
                        name: '__actions',
                        titleClass: 'text-center',
                        dataClass: 'text-center',
                    },
                ],
                sortOrder: [
                    {
                        field: 'name',
                        direction: 'asc'
                    }
                ],
                tableClass: 'table table-bordered table-hover',
                ascendingIcon: 'glyphicon glyphicon-chevron-up',
                descendingIcon: 'glyphicon glyphicon-chevron-down',
                itemActions: [
                    {
                        name: 'view-item',
                        icon: 'glyphicon glyphicon-eye-open',
                        class: 'btn btn-primary btn-xs btn-action'
                    },
                    {
                        name: 'edit-item',
                        icon: 'glyphicon glyphicon-pencil',
                        class: 'btn btn-warning btn-xs btn-action'
                    },
                    {
                        name: 'delete-item',
                        icon: 'glyphicon glyphicon-trash',
                        class: 'btn btn-danger btn-xs btn-action'
                    },
                ],
                appendParams: [],
                wrapperClass: 'vuetable-wrapper ',
                tableWrapper: '.vuetable-wrapper',
            }
        },
        watch: {
            'perPage': function(val, oldVal) {
                this.$broadcast('vuetable:refresh')
            },
        },
        methods: {
            /**
             * Other functions
             */
            setFilter: function() {
                this.appendParams = [
                    'search=' + this.search
                ];

                this.$nextTick(function() {
                    this.$broadcast('vuetable:refresh')
                })
            },
            resetFilter: function() {
                this.search = ''

                this.setFilter()
            },
            preg_quote: function( str ) {
                return (str+'').replace(/([\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!\<\>\|\:])/g, "\\$1");
            },
            highlight: function(needle, haystack) {
                return haystack.replace(
                        new RegExp('(' + this.preg_quote(needle) + ')', 'ig'),
                        '<span class="highlight">$1</span>'
                )
            },
            paginationConfig: function(componentName) {
                this.$broadcast('vuetable-pagination:set-options', {
                    wrapperClass: 'pagination pull-right',
                    icons: {
                        first: '',
                        prev: '',
                        next: '',
                        last: ''
                    },
                    activeClass: 'active',
                    linkClass: 'btn btn-default btn-sm',
                    pageClass: 'btn btn-default btn-sm'
                })
            }
        },
        events: {
            'vuetable:action': function(action, data) {
                console.log('vuetable:action', action, data)
                console.log('data.id', data.id)

                if (action == 'view-item') {
                    console.log('action', action, 'data.name', data.name)
                } else if (action == 'edit-item') {
                    console.log('action', action, 'data.name', data.name)
                } else if (action == 'delete-item') {
                    console.log('action', action, 'data.name', data.name)
                }
            },
            'vuetable:cell-dblclicked': function(item, field, event) {
                var self = this;

                console.log('cell-dblclicked: old value =', item[field.name])
                this.$editable(event, function(value) {
                    console.log('$editable callback:', value)
                })
            },
            'vuetable:load-success': function(response) {
                var data = response.data.data;

                if (this.search !== '') {
                    for (let n in data) {
                        data[n].name = this.highlight(this.search, data[n].name)
                        data[n].email = this.highlight(this.search, data[n].email)
                    }
                }
            },
            'vuetable:load-error': function(response) {
                if (response.status == 400) {
                    console.log('Something\'s Wrong!', response.data.message, 'error')
                } else {
                    console.log('Oops', E_SERVER_ERROR, 'error')
                }
            }
        }
    }
</script>

can you tell me what is wrong with my code? Thank you.

[ratiw]

@herusdianto I think it actually is a bug in my code, not yours. I'll find time to re-check and fix it. Thanks!

[ratiw]

@herusdianto I was already fixed in v1.5.2 about a week ago. Please update vuetable to v1.5.2, then it should fix the problem.