cant create Instance inside conditional component

[Ischafak]

i have another initte bug i think and i cant figure it out. i have a component, inside page i am calling this component. It has v-if so that component conditionally renders. inside this component i have this command

and this is console log instance is null as you can see

if i remove v-if it works i guess but i need the if.

i am using nuxt3 btw

[juujisai]

Hi. If I understand correctly the v-if directive is beeing added to the sidenav component right? At the moment of calling the initTE method the sidenav does not exist yet and so does it's initializing attributes. You can try calling the initTE method after the sidenav mounts - for example with use of a watcher. Maybe using a computed value to determine the visibility of the sidenav could also work (you would have to call the initTE inside the callback, before returning a value) but I think using watcher makes a lot more sense. You can also add a if statement to check whether the component was already initialized so it won't happen twice (unless needed).

Or if thats not the case (since now I see that the getElementById returns an element), you can try delaying the initTE method inside a setTimeout method by for example 200ms and see what happens.

[Ischafak]

yes thats not the case like you said.

initte method works inside the conditionally rendered component. When v-if is true the mounted event works. that i screenshotted. This component is not rendering when the user first go to page. It renders according to axios fetch data.

i put 2s and still it looks null

[Ischafak]

Actually i discovered something i have a menu field on the left side (this is another sidenav i have used the same example in twelements page) it is sidenav too. And it also has initte method.

there are 2 different initte (one of menu, the other one in the sidenav that i prepared) when i delete the initte in menu,

this one works but i mean if i give 2s it works if i give 200ms it is not

[juujisai]

Did you try to add the allowReinits option? Maybe the initTE did see the init for sidenav before and is blocking this one. initTE({ Sidenav, Input }, { allowReinits: true });

Or you can try initializing the sidenav via JS: new Sidenav(document.getElementById("sidenav"));

[Ischafak]

you know what second code that you wrote works perfectly. Is it have any negative effect?

[juujisai]

It should not have any negative effects. The initTE method does basically the same thing - it just looks for the data attribute inside your app that is beeing used for autoinitialization.

Good thing would be to make sure you wont initialize the sidenav twice - remove the Sidenav component from initTE method or instead of new Select call Select.getOrCreateInstance.

[Ischafak]

hi, can i get a recommendation from you? i have multiple collapses in multiple components in 1 page

should i

async mounted() { const { Collapse, initTE } = await import("tw-elements"); initTE({ Collapse }); }, in every component or is it better way to do that. (except slot if it is possible please)

[juujisai]

Hi @Ischafak . The best thing would be to call the initTE({Collapse}) method inside some Parent component so that you won't have to call it in multiple places and won't risk initializing the component more than once. But if that won't work (for example, inside the parent element we do not have the element with data attribute used for initialization yet) and the component is working fine then using the initTE inside multiple component should be ok.