I have a problem with submenu that I use from bootstrap. It became a text not a button to go another page, here is some code that I use
This is the latest vue and bootstrap 4, I've tried some tutorial's but didn't work
<div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
<div class="menu_section">
<ul class="nav side-menu">
<li><a><i class="fa fa-edit"></i> Penjualan <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a>Pemesanan penjualan<span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><router-link to="/pemesananPembelian">P.O Penjualan</router-link></li>
<li><router-link to="/konfirmasipemesananPenjualan">P.O Konfirmasi</router-link></li>
<li><router-link to="/dikirimpemesananPenjualan">P.O Dikirim</router-link></li>
<li><router-link to="/batalpemesananPenjualan">P.O Batal</router-link></li>
</ul>
</li>
I want to make a sub menu to go another page, but the submenu didn't work and become a textenter code here
Check out the official doc:
https://router.vuejs.org/api/#router-link
<router-link tag="li" to="/foo">
<a>/foo</a>
</router-link>
Related
I have a Vue single-page-apps about a simple online bookstore. This project so far runs well except a tiny issue: When a login customer clicks 'logout' link on navbar, the system navigates him to the frontpage and 'logout' link becomes a 'register/login' link. This link should be a dropdown, but after navigating, this link doesn't work(no respond while clicking it) anymore until press F5 to reload the page from 'server'. Following is my navbar.vue
<template>
...
<!---Good Dropdown--->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownShowMenuLink"
role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Showroom
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownShowMenuLink">
<router-link class="dropdown-item" to="/showBookList/newAddings">By Updates</router-link>
<router-link class="dropdown-item" to="/showBookList/authors">By Authors</router-link>
<router-link class="dropdown-item" to="/showBookList/categories">By Categories</router-link>
</div>
</li>
<template v-if="isLogin">
<li class="nav-item">
<a class="nav-link" id="logoutLink" href="javascript:void(0)" #click="logout">logout</a>
</li>
<template v-if="isAdmin">
<li class="nav-item">
<router-link class="nav-link" to="/admin">Dashboard</router-link>
</li>
</template>
</template>
<template v-else>
<!--Bad dropdown-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="javascript:void(0)" id="navbarDropdownUserMenuLink"
role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Login/Register</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownUserMenuLink">
<router-link class="dropdown-item" to="/loginForm">Sign In</router-link>
<router-link class="dropdown-item" to="/registerForm">Sign Up</router-link>
</div>
</li>
</template>
...
</template>
<script>
import configs from '#/configs'
export default{
...
methods{
async logout(){
let logoutURL = configs.serverURL + configs.serverPort + '/logout';
await this.$store.dispatch('logout', {logoutURL});
alert(this.$store.getters.currentMsg);
this.$router.push('/');
},
},
...
}
</script>
I figured out a simple way to work around:
use v-show rather than v-if to render bootstrap dropdown.
<li v-show="!isLogin" class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownUserMenuLink"
role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Login/Register</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownUserMenuLink">
<router-link class="dropdown-item" to="/loginForm">Sign In</router-link>
<router-link class="dropdown-item" to="/registerForm">Sign Up</router-link>
</div>
</li>
According to guidline of Vue2:
v-if is “real” conditional rendering because it ensures that event listeners and child components inside the conditional block are properly destroyed and re-created during toggles. In comparison, v-show is much simpler - the element is always rendered regardless of initial condition, with CSS-based toggling.
I think sth wrong while re-creating "dropdown". Maybe someone can help me to figure out how to use "v-if".
I have an application with Vue and VueRouter, in my root component I have a tab panel, each tab is a router-link, when I click on each routerlink it takes me to the specific route, until then everything is fine, for example the route misitio.com/shop/ activate the link for this route
the problem is when within that route there is another component that leads to mysitio.com/shop/categories, I would like to leave the link of the route mysite.com/shop active but it is not like that.
Example Code
<div class="col-md-12">
<ul class="nav nav-tabs md-tabs nav-justified default-color-dark" role="tablist">
<li class="nav-item ">
<router-link :to="{ name: 'shop'}" exact
class="nav-link text-white"
data-toggle="tab"
role="tab">
<i class="fa fa-table"></i> SHOP
</router-link>
</li>
<li class="nav-item">
<router-link :to="{ name: 'other'}" exact
class="nav-link text-white"
data-toggle="tab"
role="tab" >
<i class="fa fa-heart"></i> OTHER
</router-link>
</li>
</ul>
<div class="tab-content card">
<transition name="fade" mode="out-in">
<router-view></router-view>
</transition>
</div>
</div>
The urls of my tabs are
midominio.com/shop/
midominio.com/shop/categories/
if I do not use exact, when I select the second option the first one also marks me
How can I achieve this behavior? I thought of a regular expression maybe to activate the link
Probably not the best solutions, but these are the ways that your problem could be solved:
controlling the active class like v-bind:active-class="$route.path
!== '/shop/categories/' ? '(your active class)' : ''
control the exact prop like v-bind:exact="$route.path ===
'/shop/categories/'"
I'm trying to start my own business and looking to save a bit of money by using a bootstrap 3 based template I purchased.
The menu on mobiles doesn't collapse when a menu item is chosen nor when someone clicks outside the menu. Apparently it's not supposed to which strikes me as wildly counterintuitive but there we go. How might I go about getting it to collapse when a subject is chosen OR someone clicks outside the menu, please? There are similar questions here but none of them have worked for me thus far. I'm probably doing something stupid though.
<nav class="navbar navbar-default">
<div class="row">
<div class="navbar-header col-md-3 col-sm-3">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-res"> <span class="sr-only">Toggle navigation</span> <span class="fa fa-navicon"></span> </button>
<!--======= LOGO =========-->
<div class="logo col-2"><img src="images/pdriving4.png" alt="" ></div>
</div>
<!--======= MENU =========-->
<div class="col-md-9 col-sm-9">
<div class="collapse navbar-collapse" id="nav-res">
<ul class="nav navbar-nav">
<li class="dropdown active"> Home </li>
<li class="dropdown"> About Paul</li>
<li class="dropdown"> Passed Gallery </li>
<li class="dropdown"> Courses </li>
<li>Contact</li>
<li class="dropdown"> FAQs </li>
<li class="dropdown"> Book Now </li>
</ul>
</div>
</div>
</div>
</nav>
I am really a newbie in bootstrap 3.
I have made this menu that will collapse when screen is resized, but nothing happend when I click on the button.
<button type="button" class="btn btn-navbar-highlight btn-lg btn-primary" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false">
NAVIGATION <span class="icon-chevron-down icon-white"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="nav nav-pills ddmenu">
<li class="dropdown active">Home</li>
<li class="dropdown">About</li>
<li class="dropdown">
Page <b class="caret"></b>
<ul class="dropdown-menu">
<li>Full Page</li>
<li>Two Column</li>
<li>Three Column</li>
<li>Documentation</li>
<li class="dropdown">
Dropdown Item »
<ul class="dropdown-menu sub-menu">
<li>Dropdown Item</li>
<li>Dropdown Item</li>
<li>Dropdown Item</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">Gallery</li>
<li class="dropdown">Contact</li>
</ul>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
What am I doing wrong?
Bootstrap's JavaScript requires jQuery version 1.9.1 or higher.
You can use version 1.12.0, which is the last one of the 1.X branch at the moment, and it should work :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
Bootstrap should have notified you about this in your browser's javascript console directly, you should enable it as soon as you develop with projects that deal with JavaScript.
I've just started learning Boostrap and I'm having a couple of problems with the navigation bar toggle. I've checked up answers from here (like this: Bootstrap 3.0 nav responsive toggle button not working) but I still can't find a solution to what the problem might be.
I'll be glad if someone can help me look into the code and tell me what the problem is. I've linked to the relevant script files (both bootstrap and jquery js files) but I have no with the problem.
here is my code,
<!-- Nav Bar Starts-->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<a class="navbar-brand text-muted" href="#"> eLeanr</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"> Home
</li>
<li> About eLeanr
</li>
<li> Contact
</li>
</ul>
</div>
</div>
</div>
<!-- Nav Bar Ends-->