Question

我正在设法通过vuejs进行引导，但是我无法获得菜单单击导航到其他选项卡。仅第一个标签内容始终显示。

library(shiny)
shinyApp(
  ui = fluidPage(
    selectInput("letters", "Choose a letter:",choices = letters,selected = letters[1],multiple = T)
  ),
  server = function(input, output,session) {

    observeEvent(input$letters, {
      updateSelectInput(session, "letters", selected = c(letters[1], 
      input$letters))
    }, ignoreNULL = F)        
  }
)

您能找出问题所在吗，单击导航按钮应该显示相应的选项卡。

Answer 1

单击tab项时，将出现以下错误：

未捕获的TypeError：this.navItemsArray.foreach不是函数

这是一个错字，因此只需将其更改为this.navItemsArray.forEach即可：

 this.navItemsArray.foreach(navItem => {
   navItem.isActive = (passedAlongMenuItemObject == navItem);
                })

检查此工作代码：

<!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>

     <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>
     <!-- vuejs CDN -->
  
    <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>

导航菜单不适用于使用引导程序的vue.js

1 个答案: