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 添加类“hide”

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>

Answer 2

您可以使用data 变量来实现此目的，而无需使用单独的function 调用。

  <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="aboutcompany" 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-company></about-company>
    </div>

然后在数据对象中定义activeTab。

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