文章/答案/技术大牛

发布

社区首页 >问答首页 >使用锚定标记在Vue.js中显示模式

问使用锚定标记在Vue.js中显示模式
EN

Stack Overflow用户

提问于 2020-04-12 04:55:04

回答 1查看 1.1K关注 0票数 0

我是Vue.js新手，我正尝试在我的导航栏组件(链接)中创建一个锚标记，当单击它时会显示一个模式组件，但我无法做到。

我只看到了使用属性数据目标的按钮的解决方案，它不能作为锚标签上的属性。

我也没有尝试路由到LoginModal.vue组件，我做错了什么，我该去找谁呢？

Navbar.Vue

<template>
  <nav class="navbar navbar-expand-md py-3">
    <div class="container">
      <a class="navbar-brand" href="/"></a>

            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navlinks" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"><i class="fas fa-bars" style="color: #283990; font-size:28px;"></i></span>
            </button>

            <div class="collapse navbar-collapse" id="navlinks">

              <ul class="navbar-nav ml-auto">

                <li class="nav-item mx-4">
                    <a class="nav-link" href="#">About Us</a>
                  </li>
                  <li class="nav-item mx-4">
                    <a class="nav-link" href="#">FAQ</a>
                  </li>
                  <li class="nav-item mx-4">
                    <!-- <router-link class="nav-link login" to='/login'>{{msg}}</router-link> -->
                    <a class="nav-link login" href="/login">Log in</a>
                  </li>
                  <li class="nav-item mx-3">
                    <a id="jn" class="nav-link btn btn-primary border-0 px-5 py-2 joinbutton" href="/signup">Join</a>
                  </li>
              </ul>

            </div>
        </div>
  </nav>
</template>

    <script>
    export default {
      name: 'Navbar',
      data () { 
      return { 
        msg: 'Log in'
      }
    }
    }
    </script>

LoginModal.Vue

 <template>
     <body>
            <div id="LoginModal" class="modal" tabindex="-1" role="dialog"  aria-hidden="true">
                <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal"> &times;</button>
                                <h4>Sign Up For Our Newsletter!</h4>
                            </div>
                             <div class="modal-body">
                                <p>body text goes here.</p>
                            </div>
                             <div class="modal-footer">
                                <button type="button" class="btn btn-primary">Save changes</button>
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                </div>
            </div>
        </body>
    </template>

我的路由器folder.NB中的Index.Js我不想路由LoginModal组件。最佳实践是什么？

 import Vue from 'vue'
    import Router from 'vue-router'
    import Home from '@/components/Home.vue';
    import LoginModal from '@/components/Login-Signup/LoginModal.vue';

    Vue.use(Router)

    export default new Router({
      routes: [
        //route records

        { //default route
            path: '/',
            name: 'Home',
            component: Home
        },

        {
            path: '/login',
            name: 'LoginModal',
            component: LoginModal
        },

        {
          path: '/signup',
          name: 'Signup',
          component: LoginModal
        }

      ]
    })

vue.js

javascript

html

回答 1

Stack Overflow用户

发布于 2020-04-12 05:35:22

我看到你的代码了，所以你想展示你的模式，对吧？

最好的解决方案是使用子组件，所以您不需要在vue路由器中定义新的路由，只需将LoginModal.Vue导入到Navbar.Vue，然后在您的模板上创建它，并使用v-if通过@click事件显示和隐藏您的模式

这就是它：

<template>
  <div>
    <nav class="navbar navbar-expand-md py-3">
        <div class="container">
          <a class="navbar-brand" href="/"></a>

            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navlinks" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"><i class="fas fa-bars" style="color: #283990; font-size:28px;"></i></span>
            </button>

            <div class="collapse navbar-collapse" id="navlinks">

              <ul class="navbar-nav ml-auto">

                <li class="nav-item mx-4">
                    <a class="nav-link" href="#">About Us</a>
                  </li>
                  <li class="nav-item mx-4">
                    <a class="nav-link" href="#">FAQ</a>
                  </li>
                  <li class="nav-item mx-4">
                    <!-- <router-link class="nav-link login" to='/login'>{{msg}}</router-link> -->
                    <a class="nav-link login" href="/login" @click="showLogin">Log in</a>
                  </li>
                  <li class="nav-item mx-3">
                    <a id="jn" class="nav-link btn btn-primary border-0 px-5 py-2 joinbutton" href="/signup">Join</a>
                  </li>
              </ul>

            </div>
        </div>
      </nav>

      <!-- style your modal and hide it with data property -->
      <login-modal v-if="login"/>
    </div>

</template>

<script>
import LoginModal from '@/components/Login-Signup/LoginModal';
export default {
  name: 'Navbar',
  components: { LoginModal },
  data () { 
    return { 
      msg: 'Log in',
      login: false,
    }
  },
  methods: {
    showLogin(e) {
      // disable anchor tag
      e.preventDefault();

      this.login = true;
    }
  }
}
</script>

最后，请记住，在vue文件中使用路由器链接而不是标记会更好！

有关更多参考，请访问：https://router.vuejs.org/api/#router-link

此外，如果你想制作具有额外功能的专业模态，也可以尝试vue-modal。

我希望能帮上忙。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/61163594

复制

相似问题

问使用锚定标记在Vue.js中显示模式
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用锚定标记在Vue.js中显示模式EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用锚定标记在Vue.js中显示模式
EN