[英]Tabbed navigation in Vue.Js
I'm trying to create a basic tabbed navigation system with Vue. 我正在尝试使用Vue创建一个基本的选项卡式导航系统。 I'm capturing user's navigation choice and calling a function which changes a certain data. 我正在捕获用户的导航选择并调用一个更改某个数据的函数。 That data is eventually going to determine which tab should be active. 该数据最终将决定哪个选项卡应该是活动的。 So far I have this: 到目前为止我有这个:
HTML HTML
<div id="app">
<div id="nav">
<a href='#' class="tab" v-on:click="makeActive('homeActive')">Home</a>
<a href='#' class="tab" v-on:click="makeActive('infoActive')">Info</a>
</div>
<div class="content">
<div class="boxes" id="home" v-bind:class="choice">
</div>
<div class="boxes" id="info" v-bind:class="choice">
</div>
</div>
</div>
Vue Vue公司
new Vue({
el: '#app',
data: {
choice: 'homeActive' // Home is chosen by default
},
methods: {
makeActive: function(val) {
this.choice = val;
}
}
});
At the moment, if the user clicks on Home link, both home and info divs get homeActive class, this is because I couldn't manage to return two statements with my methods with this basic logic: 目前,如果用户点击Home链接,home和info div都会获得homeActive类,这是因为我无法使用这个基本逻辑使用我的方法返回两个语句:
enable tab1 & disable tab2 || 启用tab1并禁用tab2 || enable tab 2 & disable tab1 启用选项卡2并禁用tab1
I'm trying different approaches but I can affect only a single state with called methods due to binding my content to a single class. 我正在尝试不同的方法但由于将我的内容绑定到单个类,因此我只能通过调用方法影响单个状态。
Any suggestions on how I can get this working with Vue? 关于如何使用Vue的任何建议?
The way I generally solve this is by adding another function isActiveTab
like so... 我通常解决这个问题的方法是添加另一个函数isActiveTab
就像这样......
new Vue({
el: '#app',
data: {
choice: 'homeActive' // Home is chosen by default
},
methods: {
makeActive: function(val) {
this.choice = val;
},
isActiveTab: function(val) {
return this.choice === val;
}
}
});
Then in your view... 那么在你看来......
<div id="app">
<div id="nav">
<a href='#' class="tab" v-on:click="makeActive('homeActive')">Home</a>
<a href='#' class="tab" v-on:click="makeActive('infoActive')">Info</a>
</div>
<div class="content">
<div class="boxes" id="home" v-show="isActiveTab('homeActive')">
</div>
<div class="boxes" id="info" v-show="isActiveTab('infoActive')">
</div>
</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.