带锚标签的VueJS @click

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>