Vuejs 在单击时显示选项卡内容

Question

我的 vuejs 代码有问题，我想在每次单击选项卡时显示特定内容。

到目前为止，这是我的代码。

<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="aboutcompany" class="col-md-2" @click="active">About Company</a>
  </nav>

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

</template>

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

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

一旦我点击带有 id="aboutcompany" 的 href ，带有 id="about" 的 div 应该有一个类“show”，并为带有 id="overview" 的 div 添加类“隐藏”

Answer 1

您可以更多地利用 vuejs 可以提供的功能：

<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-company></about-company>
  </div>
</template>

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

export default {
  components: {
  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>