BootstrapVue作用域插槽报错：Property or method 'data'未定义求助

Hey there! Let's dig into why you're seeing that "Property or method 'data' is not defined" error with your BootstrapVue table. The most common culprit here is a version mismatch between the BootstrapVue documentation example you copied and what you're running locally. Here's how to fix it:

1. Check your Vue & BootstrapVue version compatibility #

First, confirm which stack you're using:

• Vue 2.x: Works with the original bootstrap-vue package
• Vue 3.x: Requires bootstrap-vue-next (the updated version built for Vue 3)

Case 1: You're using Vue 2 + BootstrapVue (original package) #

If this is your setup, the issue is likely incorrect component registration or a minor syntax oversight:

• Step 1: Ensure dependencies are installed correctly
  Run this in your project directory:

  npm install bootstrap-vue bootstrap
  

• Step 2: Register BootstrapVue in your main entry file (main.js)
  Add these lines to make sure all BootstrapVue components are available globally:

  import Vue from 'vue'
  import BootstrapVue from 'bootstrap-vue'
  import 'bootstrap/dist/css/bootstrap.css'
  import 'bootstrap-vue/dist/bootstrap-vue.css'
  
  Vue.use(BootstrapVue)
  

• Step 3: Verify your code syntax
  Your original code should work here, but double-check the <script> section for typos (your code looks correct, but missing brackets or commas can cause weird, unrelated errors). Restart your dev server after making changes.

Case 2: You're using Vue 3 + BootstrapVueNext #

BootstrapVueNext changed how scoped slots work—they no longer wrap slot props in a data object. Instead, you directly destructure props like value or label. Here's how to adjust your code:

• Updated template code:

  <template>
    <div>
      <b-table :fields="fields" :items="items" foot-clone>
        <!-- Custom formatted data column cell -->
        <template v-slot:cell(name)="{ value }">
          {{ value.first }} {{ value.last }}
        </template>
        <!-- Custom formatted header cell for 'name' -->
        <template v-slot:head(name)="{ label }">
          <span class="text-info">{{ label.toUpperCase() }}</span>
        </template>
        <!-- Custom formatted footer cell for 'name' -->
        <template v-slot:foot(name)="{ label }">
          <span class="text-danger">{{ label }}</span>
        </template>
        <!-- Default fall-back custom formatted footer cell -->
        <template v-slot:foot()="{ label }">
          <i>{{ label }}</i>
        </template>
      </b-table>
    </div>
  </template>
  

• Keep your <script> section the same (it's compatible with both versions)
• Register BootstrapVueNext in main.js:

  import { createApp } from 'vue'
  import App from './App.vue'
  import BootstrapVueNext from 'bootstrap-vue-next'
  import 'bootstrap/dist/css/bootstrap.css'
  import 'bootstrap-vue-next/dist/bootstrap-vue-next.css'
  
  const app = createApp(App)
  app.use(BootstrapVueNext)
  app.mount('#app')
  

3. Rare edge case: Old Vue 2 version (pre-2.6) #

If you're stuck on Vue 2.5 or earlier, the v-slot syntax isn't supported. You'll need to use the older slot-scope syntax instead:

<template slot="cell(name)" slot-scope="data">
  {{ data.value.first }} {{ data.value.last }}
</template>

Repeat this adjustment for all your slots (head, foot, etc.).

After making these changes, restart your dev server, and the error should disappear!

内容的提问来源于stack exchange，提问作者Adam Repaský