flowbite
flowbite copied to clipboard
Laravel with Tab Selector Pricing Card
Describe the bug The code from the Tab Selector Pricing Card on page https://flowbite.com/blocks/marketing/pricing/ causes the following error in the browser console
Uncaught TypeError: this._items.filter is not a function
at t.getTab (index.ts:95:28)
at new t (index.ts:38:42)
at formtest:307:21
To Reproduce Steps to reproduce the behavior:
- Go to '...'
- Click on '....'
- Scroll down to '....'
- See error
Expected behavior
The same behaviour as the pricing example
Screenshots
If applicable, add screenshots to help explain your problem.
Desktop (please complete the following information):
- OS: Windows 10
- Browser: Opera
- Version 112.0.5197.53
Additional context
Followed the instructions on setting up for Laravel to the letter.
I seem to have resolved the problem. when using
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/flowbite.min.js"></script>
The code does not work.
Changing this to the script hidden in the example page
<script src="https://unpkg.com/[email protected]/dist/flowbite.js"></script>
and it works.
I found an alternative which is to update the call to
const pricingTabs = new Tabs(pricingTabEls,options);
at the end of the script block requires another parameter which is the target element.
If I add the extra parameter to the call and use any element from the page. The tab selector works.
const pricingHTML = {
id: document.querySelector('#premium-plan'),
};
const pricingTabs = new Tabs(pricingHTML,pricingTabEls,options);
Can you please update your example docs to either require 1.5.1 or modify the Tabs call,