zakirp4's avatar

Laravel + Vue.js add one field for router-link in Bootstrap Table filed

My table file

		     <template>
            <div>
       		<div id="toolbar" v-if="$gate.isAdmin()">

      		</div>
       		<bootstrap-table :columns="myColumns" :data="myPosts.data" :options="myOptions"/>

   			</div>

 		</template>

This is my script part import BootstrapTable from 'bootstrap-table/dist/bootstrap-table-vue.min.js';

export default {
    //props: ['posts'],
    components: {
        'bootstrap-table': BootstrapTable
    },
    data() {
        return {

            editmode: false,

            users: [],
            mySelections: [],

            form: new Form({
                id: '',
                filename: '',
                filedisplayname: '',
                fileversion: '',
                privilege: '',
                remarks: '',
                user_id:'',
                file:null,
            }),
            myPosts: [],
            myOptions: {
                search: true,
                pagination: true,
                showColumns: true,
                showPrint: true,
                showExport: true,
                filterControl: true,
                clickToSelect: true,
                idField: 'id',
                selectItemName: 'id',
                toolbar: '#toolbar',
                classes: "table table-sm table-bordered table-hover table-striped"
            },
            myColumns: [
                { field: 'state', checkbox: true },
                {field: 'filename', title: 'File Name', sortable: true, filterControl: 'input'},
                {field: 'filedisplayname', title: 'File Display', sortable: true, filterControl: 'input'},
                {
                    field: 'pdfread',
                    title: 'User ID',
                    sortable: true,
                    filterControl: 'input',
                    formatter: function (e, value, row) {
                        var pdfread = '1';
                        for (var index = 0; index < value.length; index++) {
                            pdfread += value.pdfread[index].filename + ' ' + value.pdfread[index].user_id;

                            // Only show a comma if it's not the last one in the loop
                            if (index < (value.length - 1)) {
                                pdfread += ', ';
                            }
                        }
                        return pdfread;
                    }
                },
                {
                    field: 'action',
                    title: 'Actions',
                    align: 'center',
                    width: '160px',
                    clickToSelect: false,
                    formatter: function (e, value, row) {
                            return '<button class="btn btn-sm btn-info mr-1 			 
                 showto">'+value.pdfread_count+'</button>'+
                        '<button class="btn btn-sm btn-info mr-1 show"><i class="fas fa-eye"></i></button>' +
                                '<button class="btn btn-sm btn-warning mr-1 edit"><i class="fas fa-edit"></i></button>' +
                                '<button class="btn btn-sm btn-danger mr-1 destroy"><i class="fas fa-trash"></i>					 
                   </button>'
                    },
                    events: {
                        'click .show':  (e, value, row) =>{
                            return window.location.assign('pdfreads/' + row.id)
                        },
                        'click .edit': (e, value, row)=> {
                            //return window.location.assign('/posts/' + row.id + '/edit')
                             this.editModal(row);
                        },
                        'click .destroy': (e, value, row) =>{
                            this.deleteData(row.id);
                        },
                        'click .showto':  (e, value, row) =>{
                            this.deatilsDisplay(row.id);
                            //return window.location.assign('/user/' + row.id)

                        }
                    }
                }
            ]
        }
    },
    created() {
        //this.loadUsers();
        //this.myPosts = this.users;
        console.log("not bad");

    },
    mounted: function () {
        this.loadData();
    },

    methods: {
        loadData() {
            axios.get("api/ispack").then(response => {
                this.myPosts = response.data
                //console.log(this.myPosts);
                //alert("loaded");
            })
                .catch(function (error) {
                    console.log(666);
                })
        },

        deatilsDisplay($id){
            axios.get("api/ispack/"+$id).then(response => {
                this.myPosts = response.data
                console.log(this.myPosts);
                //alert("loaded");
            })
                .catch(function (error) {
                    console.log(666);
                })
        },
    }
}
0 likes
0 replies

Please or to participate in this conversation.