I am using Navbar component within Boostrap-Vue and would like to add an avatar, the picture of which comes from a variable in the app. The problem is that I cannot bind a variable to the avatar component inside a slot, as it tells me this is null. Is it possible to make this work?
Currently, I have the following code:
<b-navbar>
<b-navbar-brand href="#">Dashboard</b-navbar-brand>
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<b-collapse id="nav-collapse" is-nav>
<b-navbar-nav class="ml-auto">
<b-nav-item-dropdown
class="navbar-right"
toggle-class="nav-link-custom"
right
>
<template #button-content>
<b-avatar :src="this.avatar" size="sm"></b-avatar>
</template>
<b-dropdown-item to="profile">Profile</b-dropdown-item>
<b-dropdown-item to="support">Support</b-dropdown-item>
<b-dropdown-item to="logout">Logout</b-dropdown-item>
</b-nav-item-dropdown>
</b-navbar-nav>
</b-collapse>
</b-navbar>
The error is:
TypeError: this is null
You do not (and should not) need to use the this keyword inside your <template>.
So you should just write :src="avatar".
Related
I am using a Bootstrap NavBar populated with Vue.js Router as follows. I am trying to override some CSS settings of the drop-down items found in the b-dropdown-item element. How can I achieve this?
<b-navbar toggleable="lg" type="light" variant="white">
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<b-collapse id="nav-collapse" is-nav>
<b-navbar-nav class="ml-auto">
<b-nav-item-dropdown text="Item" right>
<b-dropdown-item id="dropitem" class="d-flex flex-column" href="#">
<router-link class="d-block" v-for="routes in links"
v-bind:key="routes.id"
:to="`${routes.page}`">{{routes.text}}</router-link>
</b-dropdown-item>
</b-nav-item-dropdown>
</b-navbar-nav>
</b-collapse>
#dropitem {
width:200px
}
Answer: It is possible to use an id on the element, as above (id="dropitem") to override some Bootstrap Settings.
Open your console in the browser and find the tag html with the class containing the padding.
Once you have the class, you can rewrite the style of this class.
An other solution could be to apply a ng::deep class to the dropdown and set the padding to 0.
Is that possible to use v-for twice in the same dropdown? I need to add one static drop-down-item then do a v-for for the next ones after which I need to put another static b-dropdown-item and then again place dynamic ones after 2nd static one with v-for. I am going to use the following dropdown
<b-dropdown aria-role="list">
<button class="button is-primary" slot="trigger" slot-scope="{ active }">
<span>Click me!</span>
<b-icon :icon="active ? 'menu-up' : 'menu-down'"></b-icon>
</button>
<b-dropdown-item aria-role="listitem">Action</b-dropdown-item>
<b-dropdown-item aria-role="listitem">Another action</b-dropdown-item>
<b-dropdown-item aria-role="listitem">Something else</b-dropdown-item>
</b-dropdown>
Does it make sence and will it be possible to use such an approach for that scenario by adding 2 v-for after static middle options?
Yes, it is possible.
CodePen: https://codepen.io/adamzerner/pen/ExKdWMJ
Code:
<b-dropdown text="Dropdown Button">
<b-dropdown-text>Letters</b-dropdown-text>
<b-dropdown-item v-for="(letter, index) in letters" v-bind:key="index">
{{ letter }}
</b-dropdown-item>
<b-dropdown-text>Numbers</b-dropdown-text>
<b-dropdown-item v-for="(number, index) in numbers" v-bind:key="index">
{{ number }}
</b-dropdown-item>
</b-dropdown>
this is my code for nav menu :
<b-navbar toggleable="lg" class="navbar navbar-expand-lg navbar-light">
<b-navbar-toggle target="nav-collapse" class="mx-auto my-0"></b-navbar-toggle>
<b-collapse id="nav-collapse" is-nav>
<b-navbar-nav>
<b-nav-item to="/">home</b-nav-item>
</b-navbar-nav>
<b-dropdown id="dropdown-1" text="categories">
<b-dropdown id="dropdown-2" :text="category.title" v-for="category in settings.categories"
:key="category.id">
<b-dropdown-item :to="`/category/`+child.id+`/`+child.slug" v-for="child in
category.childs" :key="child.id">{{ child.title }}</b-dropdown-item>
</b-dropdown>
</b-dropdown>
</b-collapse>
</b-navbar>
but i get so many DOM error in nuxt . i'm using bootstrap-vue . i want to use "b-dropdown" in nav bar but it cause DOM errors . how can i get rid of these errors ?
why i'm using "b-dropdown" in wrong place ? well , see this question : bootstrap-vue multi level drop down
if i remove (b-dropdown id="dropdown-1" ... ) tag , errors will go away !
First of all, it's not an error, it's a warning. It has to do with that component not being compatible with SSR so the server side content doesn't match the client side.
You should try wrapping the code between <no-ssr/> tags and that should make it work fine.
<no-ssr>
<b-navbar toggleable="lg" class="navbar navbar-expand-lg navbar-light">
<b-navbar-toggle target="nav-collapse" class="mx-auto my-0"></b-navbar-toggle>
<b-collapse id="nav-collapse" is-nav>
<b-navbar-nav>
<b-nav-item to="/">home</b-nav-item>
</b-navbar-nav>
<b-dropdown id="dropdown-1" text="categories">
<b-dropdown id="dropdown-2" :text="category.title" v-for="category in settings.categories"
:key="category.id">
<b-dropdown-item :to="`/category/`+child.id+`/`+child.slug" v-for="child in
category.childs" :key="child.id">{{ child.title }}</b-dropdown-item>
</b-dropdown>
</b-dropdown>
</b-collapse>
</b-navbar>
<no-ssr/>
For more information check this github issue.
It's a current bug in Bootstrap-Vue (version 2.14.0 to the current version 2.16.0).
However based on this comment, there's a workaround, which involves using a slot instead of the text prop.
So instead of this
<b-dropdown text="Category" ... >
<!-- Content -->
</b-dropdown>
You would write this
<b-dropdown ... >
<template v-slot:button-content>
Category
</template>
<!-- Content -->
</b-dropdown>
I am new to vue + nuxt.js
I am using bootstrap navbar. See this link
I have following code.
<b-nav-item-dropdown type="dark">
<template slot="button-content">
<i class="fas fa-user"></i> Users
</template>
<b-dropdown-item ref="users" to="/users" nuxt-link-active="/users">
Listing
</b-dropdown-item>
<b-dropdown-item to="/users/add" nuxt-link-active="/users/add">
Add new user
</b-dropdown-item>
</b-nav-item-dropdown>
<b-nav-item-dropdown bg-transparent>
<template slot="button-content">
<i class="fas fa-users"></i> Teams
</template>
<b-dropdown-item to="/teams" nuxt-link-active="/teams">
Listing
</b-dropdown-item>
<b-dropdown-item to="/teams/add" nuxt-link-active="/teams/add">
Add new team
</b-dropdown-item>
</b-nav-item-dropdown>
Now i want a parent menu to be open when child is clicked. In current scenario when i click on Team Listing, it closes the parent div so cannot identify which menu is open. Also when i click on user listing it should close team menu.
I tried many way by googling. But cannot find proper solution.
Just stumbled into this question. Here is my answer if you still need it.
You should not use nuxt-link-active in a Bootstrap Vue element.
You may rather use :
<b-dropdown-item to="/teams" exact exact-active-class="active">
Listing
</b-dropdown-item>
I'm really enjoying Vue and Bootstrap Vue - very nice. However, one small issue - here's my template:
<template>
<div >
<b-dropdown variant="link" size="lg" no-caret>
<template slot="button-content">
<img src="../assets/logo.png">
</template>
<div v-for="row in navOptions" :key="row.id">
<b-dropdown-item v-bind:to="row.url" >{{ row.text }}</b-dropdown-item>
</div>
<b-dropdown-item>User</b-dropdown-item>
</b-dropdown>
</div>
</template>
The generated html for the items in the v-for loop is:
<a data-v-6949e825="" href="/xxxx/map" class="dropdown-item active" role="menuitem" target="_self">Map</a>
My problem is the "active" that is added to the class, it looks poor:
and isn't relevant as the items are not active.
I have the same issue with <b-nav-item>
Is there bootstrap vue way to disable 'active'?
You can do something like this:
<router-link to="/" tag="li" active-class="active" exact><a>Home</a></router-link>
This is going to create an tag with the active property and is going to change on the bases of the route.
If you are creating nested routes like /something/somethingelse is order to add the active class at /something li you need to add the exact property
For me does not work. The solution that worked for me:
<b-dropdown-item :to="{ path: '/new-task' }">New Task</b-dropdown-item>
More here: https://github.com/bootstrap-vue/bootstrap-vue/issues/3066#issuecomment-491258662