VueJS Router Navigation with Ajax Loaded Data

[craigarms]

Hi All,

I'm trying to use GridJS in my Vue Application, which is working fine, and i'd like to make the data in some cells clickable, this works fine using But i'd like to make it use the vue router to render the new page and not navigate to it.

Here is my Example code :

<template>
<div id="gridjs-table"></div>
</template>
<script>
import {Component, Prop, Vue} from 'vue-facing-decorator';
import { Grid, html } from "gridjs";
import "gridjs/dist/theme/mermaid.css";
import router from '@/router';

@Component({
    name: 'grid-js',
})
export default class GridJs extends Vue {
    @Prop() columns: Array<Object> = [];
    @Prop() data: any = [];

    mounted() {
        for (let i = 0; i < this.columns.length; i++) {
            if(this.columns[i].id === "id") {
                this.columns[i].hidden = true;
            }else if(this.columns[i].id === "username") {
                this.columns[i].formatter = (cell: any, row: any) => {
                    return html(`<a href="/user/${cell}">${cell}</a>`);
                }
            }
        }
        this.$nextTick(function () {
            new Grid({
                search: true,
                pagination: {
                    limit: 100
                  },
                sort: true,
                columns: this.columns,
                data: this.data
             }).render(document.getElementById("gridjs-table"));
          })
    }
}
</script>