CODEWITHSUNDEEP
javascriptvue.jsvue-componentvue-routerbootstrap-vue
Mardo
Mardo

Reputation: 117

Access parent component scope in b-table slot

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

<template>
   <div>
      <h1>View Users</h1>
      Select a user to edit

      <b-table striped :items="users">
         <template v-slot:cell(id)="data">
            <a :href="'/#/admin/user?userId=' + data.value + '&companyId=' + ##HERE## ">{{ data.value }}</a>
         </template>
      </b-table>
   </div>
</template>

export default {
  data() {
    return {
      users: [],
      companyId: ""
    }
  },
  methods: {
    getUsers() {
      var self = this;
      self.$client.get('/api/Admin/GetUsers?companyId=' + this.$route.query.companyId).then(response => {
        self._data.users = response.data;
      });
    }
  },
  mounted() {
    this.companyId = this.$route.query.companyId
    this.getUsers();
  }
}

Upvotes: 4

Views: 363

Answers (1)

Dan
Dan

Reputation: 63129

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>:

<b-table striped :items="users">
   <template v-slot:cell(id)="data">
      <a :href="'/#/admin/user?userId=' + data.value + '&companyId=' + companyId">
      {{ data.value }}
      </a>
   </template>
</b-table>

For route links, it's best to use <router-link> instead of an <a> tag:

<router-link :to="{
   path: '/admin/user',
   query: { userId: data.value, companyId: companyId }
}">
   {{ data.value }}
</router-link>

Upvotes: 2

Related Questions