Vue.js how create custom link using vue-router after render is already done?

Question

I'm working with VUE and boostrap-table works very well!

In my component I have:

<BootstrapTable :columns="table.columns" :data="table.data" :options="table.options"></BootstrapTable>`

Then axios populated the table. It works good.

I'm getting issues updating the table with calculated data received by axios. And I was wondering if there is "a best practices" for this. Basically, I need to create a custom link in first column using the id received by axios, but I would like to use the vue router.

When I got the axios data I create a custom array newData and then I update the table with:

this.$nextTick(function () { this.table.data = newData });

The array has a custom link like

link: '<a v-bind:href="club/'+team.id+'">'+team.team+'</a>',

or

 link: "<router-link :to=\"{'name': 'team',\'params\': { 'id':"+ team.id+" }}\">"+ team.team+"</router-link>",

But this is paste as plain text and not rendered.

At the moment I'm using

link: "<a href='/club/" + team.id + "'>" + team.team + "</a>",

It works but, obviously, it reloads the whole page instead of using the VUE router...

Any suggestion? The vue render() function could be help? How?

Uncoke · Accepted Answer · 2019-06-28 16:28:41Z

0

Fixed using events in the column. This is the column having calculated link:

                  columns:
                        [
                       {...},
                       {
                        field: 'match',
                        title: 'Match',
                        formatter (value, row) {
                            return `<a href="/matches/${row.pos}">${value}</a>`
                        },
                        events: {
                            'click a': (e, value, row, index) => {
                               e.preventDefault();
                                this.$router.push(`/matches/${row.pos}`)
                                }
                           }
                         },
                        {...}]

Here the workaround.

answered Jun 28, 2019 at 16:28

Uncoke

1,9224 gold badges33 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue.js how create custom link using vue-router after render is already done?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related