vuejs mdb-tab component

Topic: vuejs mdb-tab component

khilliard free asked 5 years ago

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?

Add comment

Magdalena Dembna staff answered 5 years ago

0 0 Best answer

Please insert min. 20 characters.

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 free commented 5 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 commented 5 years ago

Hi, unfortunately right now we don't provide such feature. Kind regards, Magdalena

Incremental free commented 3 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 commented 3 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

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: 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

khilliard

35Support score
7Questions 0Answers 0Snippets