【发布时间】：2018-09-28 15:17:41
【问题描述】：
我正在尝试使用 vuejs 进行引导，但我无法通过菜单单击导航到不同的选项卡。只有第一个标签内容一直显示。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie-edge">
<!-- Jquery CDN-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Bootstrap CDN -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js" integrity="sha384-pjaaA8dDz/5BgdFUPX6M/9SUZv4d12SUPF0axWc+VRZkx5xU3daN+lYb49+Ax+Tl" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!-- vuejs CDN -->
<script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div class="container">
<div id="app">
<tabs>
<tab name="One" :selected="true">
<h1>Composer is Great</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</tab>
<tab name="two">
<h1>Vagarant is awesome.</h1>
<p> Duis aute irure dolor in reprehenderit in voluptate velit.</p>
</tab>
<tab name="Three">
<h1>Docker is great.</h1>
<p>
ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</tab>
<tab name="Four">
<h1>What is Vue.js?</h1>
<p>sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</tab>
</tabs>
</div>
</div>
<script type="x-template" id="template-tabs">
<div id="applicationContainer">
<div id="navBarContainer" class='navbar navbar-expand-lg navbar-light bg-light'>
<ul class="nav navbar-nav">
<li class="nav-link active" :class="{ active: menuItem.isActive }" v-for="menuItem in navItemsArray" >
<a href="#" @click="selectTabItem(menuItem)">{{ menuItem.name }}</a>
</li>
</ul>
</div>
<div id="tabContentContainer">
<slot></slot>
</div>
</div>
</script>
<script type="x-template", id="template-tab">
<div id="individualTabContentContainer" v-show="isActive">
<slot></slot>
</div>
</script>
<script>
Vue.component('tabs',{
template: '#template-tabs',
data(){
return {
navItemsArray: []
}
},
mounted() {
this.navItemsArray = this.$children
},
methods: {
selectTabItem(passedAlongMenuItemObject){
this.navItemsArray.foreach(navItem => {
navItem.isActive = (passedAlongMenuItemObject == navItem)
})
}
}
})
Vue.component('tab', {
template: '#template-tab',
props:{
name: {required: true },
selected: {default: false }
},
data() {
return {
isActive: false
}
},
mounted() {
this.isActive = this.selected
}
})
new Vue({
el: '#app'
})
</script>
</body>
</html>
你能发现我做错了什么吗，点击导航按钮应该会显示相应的标签。
【问题讨论】：
-
使用
forEach而不是foreach... codeply.com/go/CBpKcsqlyA -
@Zim 这就是我需要更改的全部内容，您发表了评论而不是答案:-)
-
@Ciastopiekarz 我的回答出了什么问题？
-
@BoussadjraBrahim 现在很高兴.. 我期待一个闪亮的导航菜单，而不仅仅是超链接
标签： twitter-bootstrap vue.js vuejs2 bootstrap-4