I'm having a Vue.js application and using gridjs for rending my tables. Everything works fine, except one thing... My code is the following (modified from the original expamle from Grid.js):
<template>
<div id="mygrid"></div>
</template>
<script>
import { Grid, html } from "gridjs";
export default {
data() {
return {
grid: new Grid()
}
},
mounted() {
this.grid.updateConfig({
columns: ['Pokemon', 'URL'],
pagination: {
enabled: true,
limit: 5,
server: {
url: (prev, page, limit) => `${prev}?limit=${limit}&offset=${page * limit}`
}
},
server: {
url: 'https://pokeapi.co/api/v2/pokemon',
then: data => data.results.map(pokemon => [
pokemon.name, html(`<a href='/pokemons/${pokemon.name}'>Link 1</a> `<a href='https://some-external-link.com'>Link 2</a>``)
]),
total: data => data.count
}
})
this.grid.render(document.getElementById("mygrid"));
},
methods: {
showPokemon() {
this.$router.push({
name: 'showpokemon',
params: { id: 1234 }
})
}
}
}
</script>
As you can see, I've two links (Link 1 and Link 2) in the then function of the server. Link 1 is a link to another page in my vue application, while Link 2 is an external link. My problem is now that when I click on Link 1, it completely ignores/bypasses my vue-router because it simply loads the entire site completely from scratch. So instead of this, I added a function showPokemon which uses the router but my problem is now... how can I call this function? Or instead of the a-tag, maybe it's possible to use the router-link-tag? But if so, how to do this because the html() function renders it 1:1 to html. So my html source would contain <router-link>. Any ideas how to handle this?
