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
Related
I am learning Nuxt.js 3 and am writing a simple project with a one-scroll design that has a menu with anchor links. Clicking a link, the site should automatically scroll to the anchor (like a div with an id).
To test this I set up a simple Nuxt 3 installation with npx nuxi init nuxt-app, removed the demo content and replaced it with this:
pages/index.vue
<template>
<div>
<div id="home"><p>hello world</p></div>
<div class="menu">
<nuxt-link :to="{ path: '/', hash: '#ciao' }">
link
</nuxt-link>
</div>
<div style="height: 3000px">placeholder</div>
<div id="ciao"><p>ciao world</p></div>
<div class="menu">
<nuxt-link :to="{ path: '/', hash: '#home' }">
link
</nuxt-link>
</div>
<div style="height: 3000px">placeholder</div>
</div>
</template>
The problem is, that it is not working. The url in the browser is changed to localhost:3000/#ciao or localhost:3000/#home on click. But the view is not being changed.
Is there something else I need to set up in nuxt, to get anchor navigation to work?
As answered here: https://github.com/nuxt/framework/discussions/5561#discussioncomment-3007717
Using a regular a tag solves the issue
<a href="/#ciao">
go to ciao's hash
</a>
Otherwise, you can also use
<nuxt-link :to="{ hash: '#home' }" :external="true"> <!-- no need for a path if same page -->
go to home's hash
</nuxt-link>
The external prop (Nuxt3 only) is detailed here: https://v3.nuxtjs.org/api/components/nuxt-link#props
Quote from the documentation
Forces the link to be considered as external (true) or internal (false). This is helpful to handle edge-cases.
While I was reviewing headlessui's menu component, I saw the use of 2 components that are nested like the following: (see: https://headlessui.dev/vue/menu)
<template>
<Menu>
<MenuButton>More</MenuButton>
<MenuItems>
<MenuItem v-slot="{ active }">
// some content
</MenuItem>
</MenuItems>
</Menue>
</template>
So as you may see, there is a MenuItem component inside of the MenuItems component. And I need something similar to that so I can use a template and put another component's result into that template.
Here the example of what I am trying to do:
<!-- HeadingComponent.vue -->
<div class="group">
<div class="head">
{{ title }} <button>Create New</button>
</div>
<div class="content">
<!-- I want to put some component's rendered content here -->
</div>
</div>
And this is, let's say, a page where I want to use the common component.
<!-- Blog.vue -->
<HeadingComponent :title="Posts">
<BlogPostsComponent :post="someArray"/> <!-- Some other component which may vary -->
</HeadingComponent>
The question
What kind of changes do I need to do in the component HeadingComponent.vue so it works as I expected?
Slots are a good way to add a component to another or even simple html
docs : https://fr.vuejs.org/v2/guide/components-slots.html
<h1>Vue JS Slots Application</h1>
<div id="app">
<slots>
<template slot="slotA"><pre>Slot A Content from parent.</pre></template>
<template><i>Parent Component Content.</i></template>
</slots>
<hr/>
<slots>
<template slot="slotB">Replace Slot B Default Content</template>
<template><b>Replace Default Slot Content.</b></template>
</slots>
</div>
<template id="aside">
<div>
<h3>My Slots App</h3>
<slot>Default Slot Content</slot><br>
<slot name="slotA"></slot><br>
<slot name="slotB"></slot><br>
</div>
</template>
Example of codepen :
https://codepen.io/brian_kim/pen/NpWKGe
Just in a short time, I found something like slots in VueJS which is definitely what I was looking for.
Here is the guide page:
https://v2.vuejs.org/v2/guide/components-slots
What I did in my problem is that I put <slot></slot> tags inside div whose class is content, and then the last sample I gave (Blog.vue) has worked.
<!-- HeadingComponent.vue -->
<div class="group">
<div class="head">
{{ title }} <button>Create New</button>
</div>
<div class="content">
<!-- I want to put some component's rendered content here -->
<slot></slot>
</div>
</div>
I have to create collapsible tree with table data using bootstrap. This look the following way
<tr><td>Parent node1</td><td>...</td><td>...</td></tr>
<tr><td>Subparent node1.1</td><td>...</td><td>...</td></tr>
<tr><td>Subsupparent node1.1.1</td><td>...</td><td>...</td></tr>
<tr><td>Subsupparent node1.1.2</td><td>...</td><td>...</td></tr>
<tr><td>Subparent node1.2</td><td>...</td><td>...</td></tr>
<tr><td>Subsupparent node2.1.1</td><td>...</td><td>...</td></tr>
<tr><td>Subsupparent node2.1.2</td><td>...</td><td>...</td></tr>
I decided to create Vue component rendering on each level html with own data and collection of children via recursion:
<template id="tree-item">
<tr :key="currentNode.id">
<span #click="setExpanded(currentNode)">
<div style="display: inline-block;">
<span class="treegrid-indent" :style="{width: 15 * level + 'px'}"></span>
<span class="treegrid-expander fa" :class="currentNode.isExpanded ?'fa-chevron-down':'fa-chevron-right'">
</span>
</div>
{{level}} {{currentNode.id}}
</span>
</tr>
<tree-item v-for="item in currentNode.items" :currentNode="item" :level="level+1"> </tree-item>
</template>
But i get Vue error:Component template should contain exactly one root element.
Are there any ways to solve the task?
If you can relax your requirements to use a list instead of table then you can try something like this:
<div class="folder_container">
<ul class="no_list no_space">
<FolderTree :folder="folders" :level="0"/>
</ul>
</div>
And the FolderTree component's template looks like this:
<template>
<li>
<div>
<div class="folder_name">{{ folder.name }}</div>
</div>
<ul v-if="folder.child && folder.child.length > 0" class="no_list no_space">
<FolderTree
v-for="(fold,idx) in folder.child"
:key="fold.id"
:folder="fold"
:level="level + 1"
:last="1 + idx === folder.child.length"
/>
</ul>
</li>
</template>
If you need to use a table - then you will have to somehow transform your nested objects into a linear list/array of items. Otherwise you won't be able to overcome the limitation for only 1 root element in templates (unless you use render functions).
I have a strange issue which I struggled with for a long time... I have a Sidebar with several router-links.
<template>
<div class="nav nav-pills main-nav" id="sidebar" role="tablist">
<router-link class="nav-link" to="/tasks">
Tasks
</router-link>
<router-link class="nav-link" to="/notes">
Notes
</router-link>
<router-link class="nav-link" to="/sounds">
Sounds
</router-link>
<div class="account">
<router-link class="nav-link" to="/profile">
Profile
</router-link>
<a class="nav-link" #click="logOut">
Log out
</a>
</div>
</div>
</template>
<script>
export default {
name: "sidebar",
methods: {
...
}
};
</script>
I have a strange issue with the behaviour of the latter menu. If I go to localhost:8080/notes, the notes button is active as expected. Then, if I click on any of the other link(let's say /tasks), it becomes active as expected. However, if I click on some link once again, /tasks remains active and the new page does not become active. That is, I will be able to navigate to other pages, but the /tasks router link will be active whatever I do. In other words, the "active" link is only updated once... I have no idea what the problem might be :/ Any suggestions are greatly appreciated!
In App.vue I import the sidebar
<div id="app">
<router-view name="header"></router-view>
<router-view name="sidebar"></router-view>
<main :class="{ 'remove-width': sidebarOpened }">
<fade-transition origin="center" mode="out-in" :duration="250">
<router-view />
</fade-transition>
</main>
</div>
My router.js start with
let router = new Router({
mode: "history",
linkExactActiveClass: "exact-active",
linkActiveClass: "active",
base: process.env.BASE_URL,
Pretty sure you shouldn't be having multiple router-views in your template. Can you remove those / replace them with the actual components and see if it fixes the issue? Something like this:
<div id="app">
<AppHeader />
<AppSidebar />
<main>
<fade-transition>
<router-view>
</fade-transition>
</main>
</div>
If it doesn't, you should post a bit more code of your components and router to help identify the issue.
I am using bootstrap-vue. For pagination, I used b-pagination component with the following code:
<b-pagination
v-model="currentPage"
:total-rows="rows"
:per-page="perpage"
aria-controls="my-table">
</b-pagination>
It works fine.
However, I also want to add the total row count before the pagination. The following picture is what I want to achieve.
I checked the bootstrap-vue document, there is no slot for customization. Any suggestion how to customize the b-pagination component?
Finally it seems to be a simple CSS question. The following code will combine the pagination part and the total page count part.
<div style="display: flex;margin:0;padding:0;width:400px;">
<div style="margin:0;padding:0;width:300px;">
<b-pagination
v-model="currentPage"
:total-rows="rows"
:per-page="perpage"
aria-controls="my-table">
</b-pagination>
</div>
<div style="margin:auto;text-align: left;">
<ul class="pagination">
<li class="page-item active"><a class="page-link">Total {{rows}}</a></li>
</ul>
</div>
</div>
And it will generate the following pagination effect:
Link below can resolve the issue.
https://bootstrap-vue.js.org/docs/components/pagination/#pagination