initTE bug

[Ischafak]

Describe the bug there is a annoying bug that i encounter i have (v-for in in items) v-for like this and i get items after i fetch endpoint. inside this v-for there is a button and when user click that button model opens

and i am trying to init like this async mounted() { const { Modal, initTE } = await import("tw-elements")

initTE({ Modal })

}, also when page opens items is just a empty array like this []

the problem is i cant open model like this. Nothing happens when i click the button. But when i give a items array dump data it works.

as i understand when initte happens if there is no button that triggers modal it doesnt work afterwards too after button is rendered.

[juujisai]

Hi! Did you try calling the initTE method after the array populates? For example with use of watch? The initTE method is adding event listeners and if the elements do not exist yet, the modal will not be initialized.

[Ischafak]

@juujisai thanks that works i have 1 more question i am trying to use tab and it needs data-te-tab-active prop i am using v-for for tabs how can i make this work

:data-te-tab-active="activeId === types.id ? true : false" i cant do something like this because data-[te-tab-active]:block this is not working this applies to both elements

[juujisai]

@Ischafak maybe something like this would work?

    v-bind="{
      ...(activeId === types.id ? { 'data-te-tab-active': true } : {}),
    }"

[Ischafak]

yep this works very well thank you so much you are perfect also i am sorry for taking your time but i have one a last question

i have collapse element and i have similar problem for that too i have a variable if it is true the collapse should be visible when the page loads

if i add

<div 
                  class="included-features-field" :id="'included-feature-item-'+index" data-te-feature-item 
                  v-bind="{
                    ...(packageData.commitmentActive ? { 'data-te-collapse-show': true } : {}),
                  }"
                  :class="{ '!visible hidden': !packageData.commitmentActive }"
                  >
</div>

when i write something like this the animation is not working is there any possibility to do that

@juujisai

[juujisai]

@Ischafak The best way to toggle the collapse component would be to use the toggle, show or hide methods on the collapse instance.

https://tailwind-elements.com/docs/standard/components/collapse/#docsTabsAPI

[Ischafak]

ok btw about my first question

const { Tab, initTE,Collapse, Modal } = await import("tw-elements"); let modalComponent = Modal this.initTeComponent = initTE this.initTeComponent({ modalComponent });

when i do something like this it is not working but if i write

this.initTeComponent({ Modal });

it is working

i need to initte after i fetch endpoint so what should i do @juujisai

[juujisai]

@Ischafak Maybe you can use the dynamic imports inside the method you use for fetching data?

[Ischafak]

thanks i will try that but i encountered a bug i guess with tab component i cant trigger 2 field at the same time. i was capable of this this with the old version.

:data-te-target="'.pricing-tab-' + option.id" i am trying to access with class. but only the first class is working @juujisai

[juujisai]

It should not show two tabs at once, so I guess it was a bug back then. You can try to play around with the tabs though.

  <div
    class="hidden opacity-100 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"     -you would have to toggle the opacity classes here ( opacity-0 / opacity-100 )
    id="tabs-profile"
    role="tabpanel"
    aria-labelledby="tabs-profile-tab"
    data-te-tab-active    - add the attribute when necessary
    >
    Tab 2 content
  </div>