在 Vue.js 中使用锚标签显示模态
[英]Using an anchor tag to display a modal in Vue.js
问题描述
I'm new to Vue.js I'm trying to make an anchor tag in my navbar component(a link), when clicked display a modal component, but i'm not able to.
我是 Vue.js 的新手，我试图在我的导航栏组件（链接）中制作一个锚标记，单击时显示一个模式组件，但我无法做到。
I only see solutions for buttons which uses the attribute data target, that isnt available as an attribute on the anchor tag.我只看到使用属性数据目标的按钮的解决方案，它不能作为锚标记上的属性使用。
I'm also not trying to route to the LoginModal.vue component, what am i doing wrong and who do i go about it?我也没有尝试路由到 LoginModal.vue 组件，我做错了什么，我对它做了什么？
Navbar.Vue导航栏.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登录模式.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"> ×</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>
Index.Js in my router folder.NB i dont want to route the LoginModal component.我的路由器文件夹中的 Index.Js。NB 我不想路由 LoginModal 组件。 whats the best practice.什么是最佳做法。
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
}
]
})
1 个解决方案
解决方案1
0 2020-04-11 21:35:21
I saw your code, so you want to show your modal, right??我看到了你的代码，所以你想展示你的模态，对吧？
best solution is using child component, so you don't need define a new route in vue router, just import LoginModal.Vue to Navbar.Vue, then make it on your template and use v-if to show and hide your modal with @click event最好的解决方案是使用子组件，因此您不需要在 vue 路由器中定义新路由，只需将 LoginModal.Vue 导入到 Navbar.Vue，然后在您的模板上制作并使用 v-if 显示和隐藏您的模态 @点击事件
here it is:这里是：
<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>
Finally, remember it's better if you use router-link instead of a tag in your vue files!最后，请记住，最好在 vue 文件中使用 router-link 而不是标签！
see more references in: https://router.vuejs.org/api/#router-link查看更多参考资料： https://router.vuejs.org/api/#router-link
Also if you want to make professional modals with extra features, try vue-modal too.此外，如果您想制作具有额外功能的专业模态，也可以尝试 vue-modal。
I hope can help...我希望可以帮助...
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.