Vue.js, как создать пользовательскую ссылку с помощью vue-router после того, как рендер уже сделан? - PullRequest
0 голосов
/ 27 июня 2019

Я работаю с VUE и boostrap-table работает очень хорошо!

В моем компоненте у меня есть:

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

Затем в таблицу заполняются аксиозы.Это работает хорошо.

У меня возникают проблемы с обновлением таблицы расчетными данными, полученными Axios.И мне было интересно, есть ли «лучшие практики» для этого.По сути, мне нужно создать пользовательскую ссылку в первом столбце, используя идентификатор, полученный axios, но я бы хотел использовать маршрутизатор vue.

Когда я получаю данные axios, я создаю пользовательский массив newData и затем я обновляю таблицу:

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

Массив имеет пользовательскую ссылку, например

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

или

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

Но это вставка в виде обычного текста и не отображается.

В настоящее время я использую

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

Это работает, но, очевидно, он загружает всю страницу вместо использованияМаршрутизатор VUE ...

Есть предложения?Функция vue render () может помочь?Как?

1 Ответ

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

Исправлено использование событий в столбце. Это столбец с просчитанной ссылкой:

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

Здесь обходной путь .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...