How to get cell data in router link

[genyded]

The example shows how to put Vue router-links into a cell with a hard coded value (Jump to Master/Detail):

// create a new VueRouter, or make the "root" Router available
import VueRouter from "vue-router";
const router = new VueRouter();

// pass a valid Router object to the Vue grid components to be used within the grid
components: {
    'ag-grid-vue': AgGridVue,
    'link-component': {
        router,
        template: '<router-link to="/master-detail">Jump to Master/Detail</router-link>'
    }
},

// You can now use Vue Router links within you Vue Components within the Grid
{
    headerName: "Link Example",
    cellRendererFramework: 'link-component',
    width: 200
}

... but how can the text in the router-link be set to the value of the cell it is in?

[genyded]

Never mind - took some digging and trial & error - but I figured it out. One odd thing though is that if you pass params.value in the template of the router link directly, it says value is unknown. However passing the same thing via the function and then displaying the return in the template works. Seems like just template: '<router-link to="/test">{{ params.value }}</router-link>' should work, but it does not. Anyway - got it working, so closing this.

...
components: {
      'ag-grid-vue': AgGridVue,
      'link-component': {
        router,
        template: '<router-link to="/test">{{ getVal() }}</router-link>',
        methods: {
          getVal () {
            return this.params.value
          }
        }
      }
}
...

[kennethchoe]

@genyded, could you elaborate more on what you have on ...? Especially, I wonder how you made router available from the "root" Router.

[genyded]

We only have one instance of the router in our app, so I am not quite clear on your reference to a "root" router. That said, if you pass router option in the component definition as shown above after have imported it from wherever yours is (import router from '../../router.js') it should work.

[kennethchoe]

@genyded, could you take a look at issue https://github.com/ag-grid/ag-grid-vue/issues/23? He explained what I am going through well. I also have only one router. When I import it, it doesn't work. When I initiate it like

import VueRouter from "vue-router";
const router = new VueRouter();

Rendering works but clicking the link does not trigger router action.

[kennethchoe]

Here is how I resolved.

https://stackoverflow.com/questions/52121719/how-can-i-add-vue-router-link-as-ag-grid-vue-column/52211229#52211229

[seanlandsman]

@genyded

This will work as expected in the next release - the router (ie this.$router) will be populated automatically for Vue components used within the grid.

thanks