VueJS @click mit Anker Tags

Question

Ich habe eine einzelne Seite Anwendung mit einer Seitennavigationsleiste, die eine Reihe von Anker-Tags in einer Liste hat.

Ich möchte zeigen, welchen Inhalt auf der Seite in Abhängigkeit von dem Wert der selectedPage Variable angezeigt werden soll. Sie können auch den Wert selectedPage basierend auf dem Link ändern, der in der Seitenleiste angeklickt wird.

Auch beim Einschließen von .prevent auf das Click-Ereignis ändert der folgende Code den Wert der Variablen nicht. Gibt es eine andere Bedingung sollte ich stattdessen

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

verwenden Dies funktioniert, wie ich erwarten; Funktioniert es, wie du es erwartest?

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>