Vuejsはクリック時にタブの内容を表示します

Question

私のvuejsコードに問題があります。タブをクリックするたびに特定のコンテンツを表示したいのですが。

これまでのコードです。 「約」私は、ID =「aboutcompany」idを持つdiv要素とのhrefをクリックすると

<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 =「概要」との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> 

Answer 2

別のfunctionコールを使用せずにdata変数を使用して達成することができます。

<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" 
    } 
}