flowbite icon indicating copy to clipboard operation
flowbite copied to clipboard

Laravel with Tab Selector Pricing Card

Open Digitwellsolutions opened this issue 1 year ago • 1 comments

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:

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See error

Expected behavior The same behaviour as the pricing example image

Screenshots If applicable, add screenshots to help explain your problem. image

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.

Digitwellsolutions avatar Aug 21 '24 15:08 Digitwellsolutions

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,

Digitwellsolutions avatar Aug 21 '24 15:08 Digitwellsolutions