Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

b-card footer and header template slots not working

See original GitHub issue

First of, thanks for all your hard work and time.

The b-card footer (and header) template slot appears to have stopped working in v2.0.0-rc.2.

<b-card>
  <strong slot="header">Some header content</strong>
  <b-row>Some content</b-row>
  <em slot="footer">Some footer content</em>
</b-card>

The header and footer content are not displayed (where they previously did).

Operating system and version: Mac High Sierra
Browser and version: Chrome Version 65.0.3325.162 (Official Build) (64-bit)
Version of Bootstrap-Vue that you are using: v2.0.0-rc.2
Reduced test cases: https://jsfiddle.net/h1h9g4h2/

Issue Analytics

State:
Created 6 years ago
Reactions:18
Comments:13 (4 by maintainers)

Top GitHub Comments

6reactions

lmapiicommented, Mar 21, 2018

having the same problem here, downgrading to 2.5.15 works.

4reactions

mjlcommented, Mar 18, 2018

I can confirm that it is related to vue 2.5.16; backing down to 2.5.15 makes the slots reappear with no other changes anywhere.

Top Results From Across the Web

Card | Components - BootstrapVue

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background...

vue.js - Only show slot if it has content - Stack Overflow

Since the above component doesn't contain a footer, it should not be rendered, but it is. I've tried using this.$slots['footer'] , but this ......

Understanding scoped slots in Vue.js - Binarcode

Some usages for slots usually are: Generic components (Button, Modal, Card, Dropdown, Tabs etc); Layout components (App, Header, Navbar, Footer) ...

A Comprehensive Guide to Vue Slots - SitePoint

<div id="app"> <card> <template v-slot:header> <h2>Card Header ... above example, we add a name property for the header and footer slots.

Vue v-slot tutorial with examples - BezKoder

This tutorial shows many Vue v-slot examples: Named Slots example with v-slot, Vue Scoped Slots ... <bkr-card> <template v-slot:header> <img ...