アンカータグ付きVueJS @クリック

Question

私は、リスト内にアンカータグのセットを持つサイドナビゲーションバーを備えた単一のページアプリケーションを持っています。

selectedPage変数の値に応じて、ページに表示するコンテンツを表示する必要があります。サイドバーでクリックされたリンクに基づいてselectedPageの値を変更するだけでなく、

clickイベントに.preventを含める場合でも、以下のコードは変数の値を変更しません。これは私が期待どおりに動作し、私が代わりに

を使用する必要があります別の条件MyPage.html

#Navbar for selecting content 
<div id="sidebar-wrapper"> 
     <ul class="sidebar-nav"> 
     <li><a href="#" @click.prevent="selectedPage ='Foo'">Foo</a></li> 
     <li><a href="#" @click.prevent="selectedPage ='Bar'">Bar</a></li> 
     </ul> 
</div> 

#Page content 
<div id="page-content-wrapper"> 
<div class="main-content" id="app" v-cloak> 

    <div class="container-fluid" v-if="selectedPage === 'Foo'"> 
    <h3 class="page-title">{{selectedPage}}</h3> 
    </div> 

    <div class="container-fluid" v-if="selectedPage === 'Bar'"> 
    <h3 class="page-title">{{selectedPage}}</h3> 
    </div> 
</div> 
</div> 

App.js

new Vue({ 
    el: '#app', 
    data: { 
    selectedPage: 'Foo', 
    } 
}) 

Answer 1

があります。あなたはそれがあなたの期待通りに働いていますか？

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    selectedPage: 'Foo' 
 
    } 
 
});

#app { 
 
    display: flex; 
 
} 
 

 
#sidebar-wrapper { 
 
    border-right: solid thin black; 
 
    margin-right: 15px; 
 
    padding-right: 15px; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script> 
 
<div id="app"> 
 
    <div id="sidebar-wrapper"> 
 
    <ul class="sidebar-nav"> 
 
     <li><a href="#" @click.prevent="selectedPage ='Foo'">Foo</a></li> 
 
     <li><a href="#" @click.prevent="selectedPage ='Bar'">Bar</a></li> 
 
    </ul> 
 
    </div> 
 

 
    #Page content 
 
    <div id="page-content-wrapper"> 
 
    <div class="main-content" id="app" v-cloak> 
 

 
     <div class="container-fluid" v-if="selectedPage === 'Foo'"> 
 
     <h3 class="page-title">{{selectedPage}}</h3> 
 
     Foo section 
 
     </div> 
 

 
     <div class="container-fluid" v-if="selectedPage === 'Bar'"> 
 
     <h3 class="page-title">{{selectedPage}}</h3> 
 
     Bar section 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>