I am having a problem with my vuejs codes, I want to show the specific content for every time I clicked the tab.

This is my code so far.

<template>
  <nav class="horizontal top-border block-section">
    <div class="col-md-20" id="tabs">
       <a href="#" id="overview" class="col-md-2" @click="active">Overview</a>
       <a href="#" id="aboutpany" class="col-md-2" @click="active">About Company</a>
  </nav>

    <div id="over" class="show">
        <overview></overview>
    </div>
    <div id="about" class="hide">
        <about-pany></about-pany>
    </div>

</template>

<script>
import Overview from './Overview'
import AboutCompany from './AboutCompany'

export default {
  ponents: {
  Overview,
  AboutCompany
},
methods: {
  active(e) {
     e.target.id.addClass('show');
  }
}
}
</script>

once I click the href with id="aboutpany" the div with id="about" should has a class "show" and add class "hide" for the div with id="overview"

I am having a problem with my vuejs codes, I want to show the specific content for every time I clicked the tab.

This is my code so far.

<template>
  <nav class="horizontal top-border block-section">
    <div class="col-md-20" id="tabs">
       <a href="#" id="overview" class="col-md-2" @click="active">Overview</a>
       <a href="#" id="aboutpany" class="col-md-2" @click="active">About Company</a>
  </nav>

    <div id="over" class="show">
        <overview></overview>
    </div>
    <div id="about" class="hide">
        <about-pany></about-pany>
    </div>

</template>

<script>
import Overview from './Overview'
import AboutCompany from './AboutCompany'

export default {
  ponents: {
  Overview,
  AboutCompany
},
methods: {
  active(e) {
     e.target.id.addClass('show');
  }
}
}
</script>

once I click the href with id="aboutpany" the div with id="about" should has a class "show" and add class "hide" for the div with id="overview"

• javascript
• vue.js

2 Answers 2

You could make more use of what vuejs can offer:

<template>
  <nav class="horizontal top-border block-section">
    <div class="col-md-20" id="tabs">
      <a href="#" v-for="tab in tabs" @click.prevent="setActiveTabName(tab.name)">
        {{ tab.displayName }}
      </a>
  </nav>

  <div v-if="displayContents(activeTabName, 'overview')">
      <overview></overview>
  </div>
  <div v-if="displayContents(activeTabName, 'about')">
      <about-pany></about-pany>
  </div>
</template>

<script>
import Overview from './Overview'
import AboutCompany from './AboutCompany'

export default {
  ponents: {
  Overview,
  AboutCompany
  },
  data() {
    return {
      // List here all available tabs
      tabs: [
        {
          name: 'overview',
          displayName: 'Company Overview',
        },
        {
          name: 'about',
          displayName: 'About us',
        }
      ],
      activeTabName: null,
    };
  },
  mounted() {
    // The currently active tab, init as the 1st item in the tabs array
    this.activeTabName = this.tabs[0].name;
  },
  methods: {
    setActiveTabName(name) {
      this.activeTabName = name;
    },
    displayContents(name) {
      return this.activeTabName === name;
    },
  },
}
</script>

You can use a data variable to achieve that without using a separate function call.

  <nav class="horizontal top-border block-section">
    <div class="col-md-20" id="tabs">
       <a href="#" id="overview" class="col-md-2" @click="activeTab = 'OVER'">Overview</a>
       <a href="#" id="aboutpany" class="col-md-2" @click="activeTab = 'ABOUT'">About Company</a>
  </nav>

    <div id="over" class="{show : activeTab == 'OVER', hide : activeTab != 'OVER'}">
        <overview></overview>
    </div>
    <div id="about" class="{show : activeTab == 'ABOUT', hide : activeTab != 'ABOUT'}">
        <about-pany></about-pany>
    </div>

Then just define the activeTab in the data object.

data: function () {
  return {
    activeTab: "OVER"
  }
}