I am using v-for loop to show pagination links -
<div v-for="n in this.totalPages">
<router-link :to="'/top/pages/' + n" @click.native="getPaginatedUser">{{ n }}</router-link>
</div>
Each link is getting displayed in new line, like below -
Is there any way i can display them in single line ? like this -
Thanks.
The reason for each link is displayed in new line is because you are iterating a div element which is a block element. You can use an inline element like span or Vue specific template which won't render any additional markup or you can just iterate the router link
<router-link
:to="'/top/pages/' + n"
@click.native="getPaginatedUser"
:key="n"
v-for="n in this.totalPages"
>{{ n }}</router-link>
Using template instead of div.
<template v-for="n in this.totalPages">
<router-link :to="'/top/pages/' + n" @click.native="getPaginatedUser" :key="n">{{ n }}</router-link>
</template>
You can change either the component div to span, or change the style of the div to:
display: inline-block;
just move the v-for to the router-link component:
<div>
<router-link v-for="n in this.totalPages" :key="n" :to="'/top/pages/' + n" @click.native="getPaginatedUser">{{ n }}</router-link>
</div>
The router-link component will render an <a> tag by default, which you can then style via css to get the layout you want.
Example:
new Vue({
el: '#root',
router: new VueRouter()
});a + a { margin-left: 0.3rem; }<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="root">
<router-link v-for="id in 10" :key="id" :to="'/foo/' + id">{{id}}</router-link>
</div>Add a class to template/div and style it with:
display: flex;
and v-for the router link instead of the div. It should put your pagination inline!
<div>tag to<span>because<div>by default causes a line break.