Как использовать событие щелчка для перехода к другому маршруту vue с paameters?

Question

Я использую bootstrap -table- vue, в кнопке действия я хочу вызвать событие onClick, которое переместится на другой маршрут.

{
    field: 'action',
    title: 'Actions',
    align: 'center',
    clickToSelect: false,
    render: function(e, value, row){},
    formatter: function (e, value, row){
        return '<a class="btn btn-sm show" data-toggle="modal" data-target="#"><i class="fas fa-edit text-info"></i></a>'
    },
    events: {
        'click .show': function (e, value, row){
            return this.$router.push({name:'tourist-site-details', params: {id:row.id}})
            //return this.router.push({name:'tourist-site-details', params: {id:row.id}})
            //none of the above options work
        },
    }
}

при нажатии на действие кнопка, ничего не происходит

return window.location.assign('/tourist-site/details/'+row.id)

приведенный выше код работает, хотя он обновит sh страницу, которая мне не очень нравится. что-то не так делаю правильно?

Answer 1

Функция в триггере событий вызывается в глобальном пространстве имен, поэтому вы должны сначала получить доступ к экземпляру Vue.

сначала назначьте свой экземпляр Vue переменной при его создании:

var vm = new Vue({
  ...
})

затем получите доступ к нему из этой переменной:

events: {
   'click .show': function (e, value, row){
        vm.$router.push('/path/'+value)
    },

рабочий пример

В качестве альтернативы вы можете использовать vue - bootstrap, что позволяет Вы должны включить vue компонентов в предопределенные слоты:

<b-table>
<template v-slot:cell(action)="data">
   <router-link :to="'/tourist-site/details/'+row.id" class="btn btn-sm show">
      <i class="fas fa-edit text-info"></i>
    </router-link>
</template>
</b-table>