How to use bootstrap-vue tables with cell templates-CodePudding

I am using bootstrap-vue, specifically the b-table feature that allows custom data rendering with templates. No matter what I try, I get an error complaining that the data prop for the row is not recognized.

First, without the template, it works as expected (using example code verbatim from the docs)...

Vue.config.productionTip = false;

var app = new Vue({
  el: '#app',
  data: {
    fields: [
      { key: 'age', label: 'Old' },
      { key: 'first_name', label: 'Given Name' },
      { key: 'last_name', label: 'Surname' },
    ],
    items: [
      { age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
      { age: 21, first_name: 'Larsen', last_name: 'Shaw' },
      { age: 89, first_name: 'Geneva', last_name: 'Wilson' },
      { age: 38, first_name: 'Jami', last_name: 'Carney' }
    ]
  }
})

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>

<div id="app">
  <div>
    <b-table striped small :items="items" :fields="fields">    
    </b-table>
  </div>
</div>

Now here, the same thing, except adding a <template> for the one of the columns...

Vue.config.productionTip = false;

var app = new Vue({
  el: '#app',
  data: {
    fields: [
      { key: 'age', label: 'Old' },
      { key: 'first_name', label: 'Given Name' },
      { key: 'last_name', label: 'Surname' },
    ],
    items: [
      { age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
      { age: 21, first_name: 'Larsen', last_name: 'Shaw' },
      { age: 89, first_name: 'Geneva', last_name: 'Wilson' },
      { age: 38, first_name: 'Jami', last_name: 'Carney' }
    ]
  }
})

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>


<div id="app">
  <div>
    <b-table striped small :items="items" :fields="fields">  
    
    <!-- here's the problem: why is "data" not recognized? -->
    <template #cell(name)="data">
        <h3 >The AGE IS: {{ data.value.age }}</h3>
        
      </template>
    
    </b-table>
  </div>
</div>

Why isn't the data prop recognized? I get the error:

[Vue warn]: Property or method "data" is not defined on the instance but referenced during render.

It's my understanding that it's a sort of dummy variable containing the data for the row, and I can call it whatever I like (so long as the code in the template uses the same name). I've tried several variations with no luck.

CodePudding user response：

bootstrap-vue@latest/dist/bootstrap-vue.min.js is for Vue3 so just switch to version 2 of bootstrap-vue:

Vue.config.productionTip = false;

var app = new Vue({
  el: '#app',
  data: {
    fields: [
      { key: 'age', label: 'Old' },
      { key: 'first_name', label: 'Given Name' },
      { key: 'last_name', label: 'Surname' },
    ],
    items: [
      { age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
      { age: 21, first_name: 'Larsen', last_name: 'Shaw' },
      { age: 89, first_name: 'Geneva', last_name: 'Wilson' },
      { age: 38, first_name: 'Jami', last_name: 'Carney' }
    ]
  }
})

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.18.1/bootstrap-vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>

<div id="app">
  <div>
    <b-table striped small :items="items" :fields="fields">  
    <template #cell(age)="{ item }">
        <h3 >The AGE IS: {{ item.age }}</h3>
      </template>
    </b-table>
  </div>
</div>

CodePudding user response：

You should have the cell in the fields, 'name' doesn't exist in your fields.

You can use first_name:

<template #cell(first_name)="data">
        <h3 >The AGE IS: {{ data.value.age }}</h3>
        
</template>

Or add name to the fields:

fields: [
      { key: 'name', label: 'Name' },
      { key: 'age', label: 'Old' },
      { key: 'first_name', label: 'Given Name' },
      { key: 'last_name', label: 'Surname' },
    ],