[Vuejs]-Vue Js – Displaying elements using v-for loop in single line (for pagination)

5👍

✅

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>

👤chanafdo

[Vuejs]-Component with multiple checkboxes and ONE v-model

2👍

You can change either the component div to span, or change the style of the div to:

display: inline-block;

👤Bryan Enid

[Vuejs]-Component with multiple checkboxes and ONE v-model

1👍

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>

👤Turtlefight