Hi! In this post we are going to walk through how to create a Tabs component in Vue 3.
The main aim for this post is for me to get started with wr...
For further actions, you may consider blocking this person and/or reporting abuse
Hi @zafaralam - this is great. When using this, I'm having difficulty rendering a dynamic list of (e.g. i'm using . It seems that does its magic at a different part of the lifecycle and doesn't recompute - as a result, I don't see any tabs. Any ideas on this?
Thanks @karnie6
I did realise a little bug myself. I'll update the code in the repo and the blog post to reflect the change.
@karnie6 I just realized that you were trying to render a dynamic list. In the Tabs.vue file you should see the onMounted method loads the tabs list. You will need some way to modify that, such as using a watcher.
If you post an example in the issues for the repo, I could help a bit more.
Good luck!!
Hi @zafaralam - appreciate the quick response! I'll take a look at the onMounted and see if i can run the same code for onUpdated. I also realized my initial post didnt have much detail.
What I'm trying to do is iterate through an array and dynamically render elements under , one for each item in the array. Here's an example using a fixed array (
testArrayof 2 elements): github.com/karnie6/helpdesk-nft-ar...When I run this, I don't see any tabs render. Inspecting the HTML, you see the HTML from the element but the HTML that's supposed to be generated from the element isn't there. However, if I hardcode two elements, it works. I agree with your suspicion it's a lifecycle issue of some sort.
Appreciate any help you can provide!
Hi @karnie6 I've updated the tabs component and it should now render the tabs dynamically. Look at the examples 7 & 8 in the App.vue file for how you can use it.
Hope this helps and thanks again for providing an example.
hey @zafaralam - AMAZING! Looks like it works, thanks so much for the quick fix!
FYI, I'd love to share what I'm building with you - if you're interested, wanna email me at karthik dot senthil at gmail ? Thanks!
@zafaralam - one other question. If i wanted to refresh the tab content on tab click, what's the best way to do that? Does have to listen to the 'tabChanged' event and do a force refresh? If so, what way would you recommend implementing that?
I would hook into the tabChanged event and then write my logic in the component that has the tabs in it.
This way you will be able to better control the refresh behaviour and it will be decoupled from the tabs component.
Also my email is syed.alam@live.com.au or you can reach out to me on twitter @zafalam.
Got it to work - and just followed you on Twitter!
It would be great if you could make a version without ts and without scss. Not everyone uses these tools. Thanks for sharing
I've been thinking about making version without ts and scss but just haven't got around to it. You can use most of the TS code as JS and just remove the typing. For scss to CSS you can use an online converter.
I'll try to create a version but no promises.