Edit button in bootstrap-table of VueJs 2.0 application

[vasilistz]

How can we have a have a edit button which push a new route for editing the specific row ?

here is my code but is not working

<template>
    <b-container fluid class="custom-container">
        <div id="toolbar">
            <b-row>
                <b-col col md="6" sm="12">
                    <b-button id="create-charge" :to="'create-charge'">Create New Charge</b-button>
                </b-col>
                <b-col cols md="6" sm="12">
                    <b-form-group
                        label-cols-lg="3"
                        label="Offer:"
                        label-size="sm"
                        label-class="font-weight-bold pt-0"
                        class="mb-0"
                        label-for="select-offer"
                    >
                        <b-form-select id="select-offer" v-model="selectedOffer" size="md" class="select-offer" @change="filterOffer()">
                            <b-form-select-option v-for="offer in availableOffers" :key="offer.id" :value="offer.id">{{ offer.name }}</b-form-select-option>
                        </b-form-select>
                        <b-button v-if="selectedOffer != null" variant="danger" @click="resetTable()">remove</b-button>
                    </b-form-group>

                </b-col>
            </b-row>
        </div>

        <b-row cols="1">
            <div>
                <b-button variant="outline-primary" :to="{ name: 'Edit Charge', params: { id: 2 }}">Edit</b-button>
                <bootstrap-table ref="table" :columns="columns" :options="options" />
            </div>
        </b-row>
    </b-container>
</template>
<script>
    import ChargesApiService from '@/api/charges'
    import $ from 'jquery'
    import BootstrapTable from 'bootstrap-table/dist/bootstrap-table-vue.esm.js'

    const totalCalculator = (value, row, index) => {
        return (row.price * row.quantity).toFixed(2)
    }

    **const generateEditButton = (value, row, index) => {
        let editButton = `<b-button variant="outline-primary" :to="{ name: 'Edit Charge', params: { id: row.id }}">Edit</b-button>`
        return editButton
    }**

    // import axios from 'axios'
    export default {
        components: {
            BootstrapTable
        },
        data() {
            return {
                columns: [
                    {
                        title: 'id',
                        field: 'id',
                        visible: false
                    },
                    {
                        title: 'Offer id',
                        field: 'offer.offerId',
                        sortable: true
                    },
                    {
                        title: 'Offer Name',
                        field: 'offer.name',
                        sortable: true
                    },
                    {
                        title: 'Charge Type',
                        field: 'chargeType.title',
                        sortable: true
                    },
                    {
                        title: 'Description',
                        field: 'description',
                        sortable: false,
                        filterControl: 'select'
                    },
                    {
                        title: 'Quantity',
                        field: 'quantity',
                        sortable: false,
                        filterControl: 'select'
                    },
                    {
                        title: 'Price',
                        field: 'price',
                        sortable: false,
                        filterControl: 'select'
                    },
                    {
                        title: 'Total',
                        field: 'total',
                        sortable: false,
                        formatter: totalCalculator
                    },
                    **{
                        title: 'Actions',
                        field: 'edit',
                        sortable: false,
                        formatter: generateEditButton
                    }**
                ],
                options: {
                    search: true,
                    showColumns: true,
                    pagination: true,
                    paginationVAlign: 'both',
                    sidePagination: 'server',
                    dataField: 'content',
                    totalField: 'totalElements',
                    showExport: true,
                    showRefresh: true,
                    pageList: [10, 20, 50],
                    queryParamsType: '',
                    showToggle: true,
                    ajax: (params) => {
                        const url = `${process.env.VUE_APP_HOST_DOMAIN}${process.env.VUE_APP_BASE_API}` + '/charges'
                        $.ajaxSetup({
                            headers: {
                                'X-Token': `${process.env.VUE_APP_AUTH_TOKEN}`
                            }
                        })
                        $.get(url + '?' + $.param(params.data)).then(function(res) {
                            params.success(res)
                        })
                    },
                    queryParams: (params) => {
                        // console.log(params)
                        let sort = []
                        if (!params.sortName) {
                            sort.push('offer.offerId')
                            sort.push('DESC')
                        } else {
                            sort.push(params.sortName)
                            sort.push(params.sortOrder.toUpperCase())
                        }
                        let range = []
                        range.push(params.pageNumber - 1)
                        range.push(params.pageSize)
                        let filter
                        let requestQuery = { range: JSON.stringify(range), sort: JSON.stringify(sort) }
                        if (params.searchText) {
                            filter = { 'q': params.searchText }
                            requestQuery.filter = JSON.stringify(filter)
                        }
                        return requestQuery
                    },
                    icons: {
                        columns: 'fa-th-list',
                        export: 'fa-download',
                        refresh: 'fa-sync',
                        toggleOff: 'fa-toggle-off',
                        toggleOn: 'fa-toggle-on'
                    },
                    theadClasses: 'thead-light',
                    sortable: true,
                    mobileResponsive: true,
                    toolbar: '#toolbar'
                },
                selectedOffer: null,
                availableOffers: []
            }
        },
        computed: {},
        created() {
            const promises = [ChargesApiService.getUniqueOffersOnCharges()]
            Promise.all(promises).then(promiseResp => {
                this.availableOffers = promiseResp[0].content
            })
        },
        methods: {
            filterOffer: function() {
                ChargesApiService.findByOffer(this.selectedOffer).then(resp => {
                    this.$refs.table.load(resp.content)
                })
            },
            resetTable: function() {
                this.selectedOffer = null
                this.$refs.table.refresh()
            }
        }
    }
</script>
<style scoped>
.custom-container {
    padding: 1rem 5rem;
}
.select-offer {
    width: 15em;
}
</style>

[wenzhixin]

These links can be help:

• https://github.com/wenzhixin/bootstrap-table-examples/blob/develop/vue-starter/src/components/HelloWorld.vue
• https://blog.bootstrap-table.com/2019/08/10/formatter-use-vue-component/