Как построить ссылку VUE в методе с использованием vue-router - PullRequest
Новая
       15

Как построить ссылку VUE в методе с использованием vue-router

0 голосов
/ 25 июня 2019

Я новенький, используя VUE.JS , и я влюблен в него! Я люблю vue-router и router-link ! Они потрясающие!

Теперь у меня есть таблица, заполненная данными, поступающими из axios, и я хотел бы создать ссылку, используя эти данные в пользовательском методе, чтобы название команды можно было нажимать.

Вот шаблон: 

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

Axios возвращает идентификатор, имя и другие данные, используемые для обновления таблицы, как здесь

По сути, мне нужно обновить значения в моей таблице, используя полученные данные Axios. Что-то вроде: 

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

или 

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

Но, очевидно, это не работает ...

Как создать ссылку?

Ответы [ 2 ]

1 голос
/ 28 июня 2019

Я исправил это, используя пользовательское событие столбца и средство форматирования в настройке таблицы столбцов: 

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

Другое решение :

На всякий случай, если в коде JSON есть ссылки вместо конфигурации таблицы, добавляется прослушиватель кликов в mount () и набор данных с хорошим форматированием в HTML-ссылке JSON: 

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

Здесь слушатель: 

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);
            }
        });
    }
0 голосов
/ 28 июня 2019

Это может быть более короткое решение для вашей проблемы: 

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

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