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
Related
I want to animate a block with posts that can be filtered.
Some filters trigger a computed method filteredPosts and they are assigned to a component liek that <block-article :posts="filteredPosts" />
In my <block-article> component I have something like that :
<template>
<div class="posts">
<div v-for="post in posts" :key="post.id"></div>
</div>
</template>
I want div .posts animate like a translation bottom/fade out on disappear and translation top/ fade in on appear.
I tried that :
<template>
<transition name="slide-fade">
<div class="posts">
<div v-for="post in posts" :key="post.id"></div>
</div>
</transition>
</template>
with corresponding css classes but it doesn't work.
I tried that :
<template>
<div class="posts">
<transition-group name="slide-fade">
<div v-for="post in posts" :key="post.id"></div>
</transition-group>
</div>
</template>
but my class .posts is a grid and here I lost the grid behavior.
THE AIM is to animate the entire div .posts rather than each elements of the v-for.
Any idea ?
Thanks all,
I finally achieve this with :
<transition name="slide-fade">
<div :key="posts.length" class="posts"></div>
</transition>
Nothe the :key="posts.length"
The problem is when posts.length doesn't change but it works in a lots of case. I will search how to fix this exception.
If you animate entire div, you should use transition, but in this case all inner elements not animated. If you want to animate all inner elements. You should use transition-group
In your case I think, need use all this method with build-in tag attribute.
Becouse in dock you can read
https://v2.vuejs.org/v2/guide/transitions.html
Unlike transition, it renders an actual element: a span by default. You can change the element that’s rendered with the tag attribute.
So you can write like this(its not full code, you must add name, key and other attrs)
<transition>
<transition-group tag="div" class="posts">
<div v-for="post in posts"></div>
</transition-group>
</transition>
I'm using vue-slick component but I have some problem with the v-for loop.
This is my code:
<slick
ref="slick"
:options="slickOptions"
class="float-left full-width slider-ingredients">
<div
v-for="ingredient in available_prots_source"
:key="ingredient.id"
#click="onSelectIngredient(ingredient.id, 'prots')"
class="slider-ingredient-item">
<div class="float-left ingredient-image">
<div class="content">
<img :src="ingredient.image" width="200" height="200" class="float-left cover-fit">
</div>
</div>
<h4 class="float-left full-width text-center ingredient-name">
{{ingredient.name}}
</h4>
<span class="float-left full-width text-center ingredient-details">
dettagli
</span>
</div>
</slick>
The problem is that my div is added outside the slick container. If I add a <div> just after the <slick> opening tag it render correctly but sees just one element even if my v-for add 4 or 5 elements.
What am I doing wrong?
How can I use slick with v-for loops?
from the official README (see method reInit in the README.md
// Helpful if you have to deal with v-for to update dynamic lists
this.$nextTick(() => {
this.$refs.slick.reSlick();
});
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
Condider the following snippet:
<template v-if="tryIsMobile" >
<div class='device device-mobile-portrait' :class="deviceClass">
<div class="device-scroller-container">
<div class='device-scroller'>
<img id='tryit-img-mobile' :src="srcUrlMobile" v-on:load="onImgLoad" v-on:error="onImgError"/>
</div>
</div>
</div>
</template>
<template v-else>
<div class='device device-tablet-landscape' :class="deviceClass" >
<div class="device-scroller-container">
<div class='device-scroller'>
<img id='tryit-img-tablet' :src="srcUrlTablet" v-on:load="onImgLoad" v-on:error="onImgError"/>
</div>
</div>
</div>
</template>
This code conditionally renders one of the two images. Some user action results in the actual shown image to be toggled.
What I'm seeing is the following: When toggling from say, tryit-img-mobile to tryit-img-tablet, the image loaded as part of tryit-img-mobile will get displayed with different dimensions instantly. However, during the time the image loads it's new source :src="srcUrlTablet", the image with src :src="srcUrlMobile" still displays.
This is probably due to Vue using the same img-tag for both the templates. How can I prevent Vue from doing this, and instead use seperate img-tags?
In cases such as this, Vue uses a special key attribute that tells it not to reuse the same element. Give each element this attribute with a unique value, and Vue will no longer reuse the same element:
<div v-if="tryIsMobile"
class="device device-mobile-portrait"
:class="deviceClass"
key="mobile"
>
...
</div>
<div v-else
class="device device-tablet-landscape"
:class="deviceClass"
key="tablet"
>
...
</div>
Is it possible to just render once into an element?
Suppose I have a contenteditable div, and only want to render the first value, then stop rerendering as the model changes. Here only the initial value of variable will be rendered.
<div contenteditable="true"> {{variable}} </div>
Use v-once
<div contenteditable="true" v-once> {{variable}} </div>
You can also wrap it with a <span>:
<div contenteditable="true">
<span v-once> {{variable}} </span>
</div>
refs:
https://v2.vuejs.org/v2/guide/components.html#Cheap-Static-Components-with-v-once
https://v2.vuejs.org/v2/api/#v-once
Or another solution is simply clone the variable and just don't modify it, for example if you call it readOnlyVariable:
<div contenteditable="true"> {{readOnlyVariable}} </div>