Im using a v-slot
in a <b-table>
so I can create a link.
The first part of the link contains data from the datasource. However the querystring has a parameter that I need to include in the link. How can I get scope to my data that holds the querystring value so I can add the querystring to the link in my v-slot
?
Thank you in advance, Marty
JavaScript
x
13
13
1
<template>
2
<div>
3
<h1>View Users</h1>
4
Select a user to edit
5
6
<b-table striped :items="users">
7
<template v-slot:cell(id)="data">
8
<a :href="'/#/admin/user?userId=' + data.value + '&companyId=' + ##HERE## ">{{ data.value }}</a>
9
</template>
10
</b-table>
11
</div>
12
</template>
13
JavaScript
1
21
21
1
export default {
2
data() {
3
return {
4
users: [],
5
companyId: ""
6
}
7
},
8
methods: {
9
getUsers() {
10
var self = this;
11
self.$client.get('/api/Admin/GetUsers?companyId=' + this.$route.query.companyId).then(response => {
12
self._data.users = response.data;
13
});
14
}
15
},
16
mounted() {
17
this.companyId = this.$route.query.companyId
18
this.getUsers();
19
}
20
}
21
Advertisement
Answer
The <a>
is parent content that is being passed into the <b-table>
slot, and that means it has access to the parent data. So you can access the companyId
directly just as you would if there was no <b-table>
:
JavaScript
1
8
1
<b-table striped :items="users">
2
<template v-slot:cell(id)="data">
3
<a :href="'/#/admin/user?userId=' + data.value + '&companyId=' + companyId">
4
{{ data.value }}
5
</a>
6
</template>
7
</b-table>
8
For route links, it’s best to use <router-link>
instead of an <a>
tag:
JavaScript
1
7
1
<router-link :to="{
2
path: '/admin/user',
3
query: { userId: data.value, companyId: companyId }
4
}">
5
{{ data.value }}
6
</router-link>
7