访问 b-table 槽中的父组件范围

Question

我在 <b-table> 中使用 v-slot，因此我可以创建 link。

link 的第一部分包含来自数据源的数据。但是，查询字符串有一个参数，我需要将其包含在 link 中。如何获取包含查询字符串值的数据的范围，以便我可以将查询字符串添加到 v-slot 中的 link?

提前谢谢你，马蒂

<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();
  }
}

Answer 1

<a> 是传递到 <b-table> 插槽的父内容，这意味着它可以访问父数据。因此，您可以像没有 <b-table>:

一样直接访问 companyId

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

对于路由链接，最好使用 <router-link> 而不是 <a> 标签：

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

访问 b-table 槽中的父组件范围

Access parent component scope in b-table slot

javascript

vue.js

vue-router

vue-component

bootstrap-vue