Topic: Dynamic tabs with HTML content (jumbotron) from vuex ?

Incremental free asked 3 years ago


I'd like to use "Tabs with HTML content" : https://mdbootstrap.com/docs/vue/components/tabs/

but not with a static content in tabs like in the example, but with a dynamic content (text and picture) from Vuex.

Is it possible to get the same "template" for all tabs (like the jumbotron in the sample) and dynamically fill it with the store content ?

Thanks


Magdalena Dembna staff answered 3 years ago


Just bind the text and src fields to a getter from Vuex - content will update automatically:

<template>
  <mdb-container>
      <mdb-tab tabs color="primary" justify>
        <mdb-tab-item icon="user" v-for="(tab, i) in tabs" :key="i" :active="pillsActive==i" @click.native.prevent="pillsActive=i">{{ tabs[i].title }}</mdb-tab-item>
      </mdb-tab>
      <mdb-tab-content>
        <mdb-tab-pane class="fade" key="show1">
          <mdb-jumbotron class="mb-0 text-center mdb-color lighten-2 white-text">
            <h2 class="card-title h2">{{ tabs[pillsActive].title}}</h2>
            <p class="my-4 font-weight-bold">{{ tabs[pillsActive].subtitle}}</p>
            <mdb-row class="d-flex justify-content-center">
              <mdb-col xl="7" class="pb-2">
                <p class="card-text">{{ tabs[pillsActive].text}}</p>
              </mdb-col>
            </mdb-row>
            <hr class="my-4 rgba-white-light">
            <div class="pt-2">
              <mdb-btn outline="white" icon="gem" iconRight>Buy now</mdb-btn>
              <mdb-btn outline="white" icon="download" iconRight>Download</mdb-btn>
            </div>
          </mdb-jumbotron>
        </mdb-tab-pane>
      </mdb-tab-content>
  </mdb-container>
</template>

<script>
import { mdbTab, mdbTabItem, mdbTabContent, mdbTabPane, mdbContainer, mdbCol, mdbRow,
mdbJumbotron, mdbBtn } from 'mdbvue';

export default {
  name: 'TabPage',
  components: {
    mdbTab,
    mdbTabItem,
    mdbTabContent,
    mdbTabPane,
    mdbContainer,
    mdbCol,
    mdbRow,
    mdbJumbotron, mdbBtn
  },
  data() {
    return {
      pillsActive: 0,
      tabs: [
        {
          title: "Title 1",
          subtitle: "Subtitle 1",
          Text: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga aliquid dolorem ea distinctio exercitationem delectus qui, quas eum architecto, amet quasi accusantium, fugit consequatur ducimus obcaecati numquam molestias hic itaque accusantium doloremque laudantium, totam rem aperiam."
        },
        {
          title: "Title 2",
          subtitle: "Subtitle 2",
          Text: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga aliquid dolorem ea distinctio exercitationem delectus qui, quas eum architecto, amet quasi accusantium, fugit consequatur ducimus obcaecati numquam molestias hic itaque accusantium doloremque laudantium, totam rem aperiam."
        },
        {
          title: "Title 3",
          subtitle: "Subtitle 3",
          Text: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga aliquid dolorem ea distinctio exercitationem delectus qui, quas eum architecto, amet quasi accusantium, fugit consequatur ducimus obcaecati numquam molestias hic itaque accusantium doloremque laudantium, totam rem aperiam."
        }
      ]
    };
  }
};
</script>

Incremental free commented 3 years ago

Thanks for your answer, but it's not rally my question.

Based on the code in this topic : https://mdbootstrap.com/support/vue/vuejs-mdb-tab-component/

I'd like to load my tabs in beforeMount(), but having a template with jumbotron, not only raw text.

Is it possible ? Thanks


Magdalena Dembna staff commented 3 years ago

In this case, you need to use v-for directive in combination with MDB Pro (like in this example: https://mdbootstrap.com/docs/vue/components/tabs/#pills-tabs), having in mind that the jumbotron has to be the same for every tab and only differ in string values (texts, image src, etc). Components such as TabItem, TabContent, etc are available for our PRO users. Best regards, Magdalena


Incremental free commented 3 years ago

Sorry, I don't understand the v-for. Could you provide a sample ? Thanks


Magdalena Dembna staff commented 3 years ago

I've edited my post to include v-for with PRO Tabs. Learn more about list rendering here: https://vuejs.org/v2/guide/list.html



Please insert min. 20 characters.

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: 6.7.1
  • Device: PC
  • Browser: Firefox
  • OS: Win 10
  • Provided sample code: No
  • Provided link: Yes