Topic: vuejs mdb-tab component
I want to use tabs to display 2 different checkbox groups that I generate dynamically using v-for. In reviewing the docs on mdb-tab it looks like I can only enter static text via the "contents" array. Can you provide a more general way to add dynamically generated html for the tab contents?
Hi, Have you tried binding :links and :content to the data from data()? In this case you could create a method which will dynamically set the content instead of entering static text. For example:
<template>
<mdb-container>
<mdb-tabs
:active="0"
default
:links="tabs.links"
:content="tabs.content"
/>
</mdb-container>
</template>
<script>
import { mdbContainer, mdbCol, mdbRow, mdbIcon, mdbTabs } from 'mdbvue';
export default {
name: 'TabPage',
components: {
mdbContainer,
mdbCol,
mdbRow,
mdbIcon,
mdbTabs
},
data() {
return {
tabs: {
links: [],
content: []
}
}
},
beforeMount() {
for(let i = 0; i < 10; i++){
this.tabs.links.push({text: `MDB${i}`})
this.tabs.content.push(`content ${i}`)
}
}
}
</script>
Darwin97 commented 6 years ago
Hello, did you found how to resolve your problem? Cause i'm in the same situation - trying to put in different tabs groups of cards that are generated by v-for. Please contact me if u did! Email: gutalov97@gmail.com
Magdalena Dembna staff premium commented 6 years ago
Hi, unfortunately right now we don't provide such feature. Kind regards, Magdalena
Incremental commented 4 years ago
Thank you Magdalena, it's perfectly working. Now I would like to display my content with a Jumbotron like "Jumbotron with news post". How to format my dynamic content like this ? Thanks
Magdalena Dembna staff premium commented 4 years ago
@Incremental I don't quite get for what effect are you going for - do you want multiple news, or do you want its content to change dynamically? Could you create a new ticket and describe your problem there in more details? Best regards, Magdalena
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Vue
- MDB Version: 5.1.1
- Device: pc desktop
- Browser: chrome, edge
- OS: windows 10
- Provided sample code: No
- Provided link: No