How to build a VUE link in a method using vue-router

Question

I'm new using VUE.JS and I'm in love with it! I love the vue-router and router-link! They are awesome!

Now I have a table populated by data coming from axios and I would like to build a link using this data in a custom method to have the team name clickable.

Here the template:

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

Axios returns ID, name and other data used to update the table as here

Basically, I need to update the values in my table using the axios's received data. Something like:

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

or

    team: '<router-link :to="club/'+team.id+'">'+team.team+'</router-link>',

But obviously it dosn't works...

How can a build a link?

Do you need to dynamically add a link to your markup? Can't you just conditionally hide/show the link? — Aer0
– Aer0, Commented Jun 26, 2019 at 6:34
In component, I have this: <BootstrapTable :columns="table.columns" :data="table.data" :options="table.options"></BootstrapTable> amd data is passed as data I need to create link using router-link as in my post. — Uncoke
– Uncoke, Commented Jun 26, 2019 at 9:41

Uncoke · Accepted Answer · 2019-06-28 17:48:13Z

I fixed it using custom column event and formatter in columns table setting:

                       {
                        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}`)
                            }
                        }
                    },

Another solution:

Just in case of JSON code having links instead of table config is adding click listener in mounted() and a well formatted dataset in JSON HTML link:

   team: "<a href=\"/club/"+team.id+"\" data-to='{\"name\": \"team\",\"params\":{\"teamId\":"+ team.id+"}}'>"+ team.team+"</a> "+userCode

Here the listener:

mounted() {
        window.addEventListener('click', event => {
            let target = event.target;
            if (target && target.href && target.dataset.to) {
                event.preventDefault();
                const url = JSON.parse(target.dataset.to);
                //router.push({ name: 'user', params: { userId: '123' } })
                this.$router.push(url);
            }
        });
    }

Abdelillah Aissani · Accepted Answer · 2019-06-28 16:56:36Z

0

This might be shorter solution for your issue :

 routes = [
 {
 component : 'club',
 name : 'club',
 path : '/club/:teamid'
 }
]

 <a @click="$router.push({ name: 'club', params: { teamid: team.id}})">team.team</a>

edited Jun 28, 2019 at 16:56

answered Jun 28, 2019 at 16:51

Abdelillah Aissani

3,1082 gold badges12 silver badges25 bronze badges

1 Comment

Uncoke Over a year ago

Thanks for the suggestion but I need to render the links into a custom HTML code passed by JSON (API)

Collectives™ on Stack Overflow

How to build a VUE link in a method using vue-router

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related