My current implementation uses a v-for loop to display pagination links:
<div v-for="n in this.totalPages">
<router-link :to="'/top/pages/' + n" @click.native="getPaginatedUser">{{ n }}</router-link>
</div>
However, each link is currently displayed on a new line like this:
1
2
Is there a way to have them appear on a single line like this:
1 2
Thank you.
The reason why each link is displayed on a new line is because you are iterating through a div element, which is a block element. To avoid this, you can use an inline element like span, Vue specific template, or simply iterate through the router link instead.
<router-link
:to="'/top/pages/' + n"
@click.native="getPaginatedUser"
:key="n"
v-for="n in this.totalPages"
>{{ n }}</router-link>
Instead of using div, consider using template.
<template v-for="n in this.totalPages">
<router-link :to="'/top/pages/' + n" @click.native="getPaginatedUser" :key="n">{{ n }}</router-link>
</template>
To modify the appearance, you have the option to either replace the component div with span or update the div style to:
display: inline-block;
To reorganize the code, simply shift the v-for directive 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>
By default, the router-link component will display an <a> tag, which can then be customized using CSS to achieve the desired layout.
For instance:
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>Include a new CSS class in the template/div section and apply the following styling:
display: flex;
Instead of utilizing a div, use the v-for directive for the router link. This will ensure that your pagination appears inline!
Is it possible to reuse the same part of a template in multiple locations without duplicating code? I know that in JSX, I can encapsulate the repeated template portion within a function and then render that function wherever needed. But is this also possib ...
I am currently using Material-UI checkbox components and I have a requirement to programmatically change the state of checkboxes to be checked, unchecked, or indeterminate based on the click of another checkbox. This action needs to be applied to a list of ...
I developed a chat application using node.js which allows users to enter a username and send messages. The messages are displayed in a <ul> format showing "username: message". I was looking for a way to make the username appear bold and in blue color ...
I am currently working on integrating Google Cloud Datastore into my NodeJS application. One issue I have encountered is that when making a query, only the end cursor is returned by default, rather than the cursor for each entity in the response. For insta ...
After clicking on the menu, a class 'active' is added to both the 'div' and 'section' elements. https://i.stack.imgur.com/jbamR.png The following javascript code accomplishes the above functionality: <script> const ...
I've been diving into the new composition-api within VueJS and have encountered a problem that I need help with. I am seeking advice on how to effectively tackle this issue. Previously, when everything was vuex-based, dispatching an action to another ...
Our Goal I aim to organize movies based on their star ratings and filter out those with ratings lower than a specified threshold. 2. Retrieve the IDs of Movies and TV shows mentioned in the view, fetch the data and score through URLs one by one. 3. Presen ...
I've been tasked with creating a button on a client's website that links to another page, like Google, for the purpose of assisting someone seeking help in case of an emergency. The challenge is finding a way to prevent the user from easily retur ...
$(document).ready(function(){ var currArray=null; var group=null; var admin=null; var equipment=null; var student=null; console.log("after get array info"); for(var i=0; i<equipment.length; i++) { console.log("equipment at index after get array info ...
Here's the code snippet I'm working with: constructor(props) { super(props) this.state = { loginButton: '', benchmarkList: '' } if (props.username == null) { this.state.loginButton = &l ...
Is it possible in JavaScript to determine the memory location and memory usage of an object? Any assistance on this matter would be greatly appreciated. ...
Check out my website at . I have a fixed, blue sidebar on the left side of the page to ensure its content is always visible. However, I'm facing an issue with smaller resolutions like 1024x768 where some bottom content is cut off. How can I adjust the ...
I am looking to integrate a Node JS package downloaded from npm into my Cocoa App and run it using Swift. Despite searching online, I have not been able to find any information on whether it is possible to call an npm package from Swift. Can anyone help m ...
I am currently working on a web application and I need to incorporate a new function. This function will display a table containing certain results when a user submits a request. If the user does not submit anything, it will show different results as tim ...
I have been working on a code snippet to rotate my camera around the x-axis within a three.js environment: var cameraOrginX = 0, cameraOrginY = 0, cameraOrginZ = 0; var cameraEndX = 0, cameraEndY = 0, cameraEndZ = 1000; var angle = 0; function initialize ...
I'm currently working on developing a straightforward pagination filter for Angular, which can be implemented as shown below: <ul> <li ng-repeat="page in items | paginate: 10"> <ul> <li ng-repeat="item in p ...
Referencing a tutorial from http://www.w3schools.com/bootstrap/bootstrap_modal.asp: <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> <div id="myModal" class="modal fade" role= ...
I am working on creating an ECMAScript (JavaScript) flavored regex to evaluate the complexity of my password based on specific criteria: Characters Used Password Strength Length ABC abc 123 #$& WEAK ... 1 x ...
I am working on a project where I need to display HTML content offline within a Windows Application. The application, developed in Autoplay Media Studio, includes an iexplore box to load the HTML. Before the application loads, I have set up a silent insta ...
I have been working on an ajax request that successfully retrieves information about files, such as the number of files, their names, and looping through them. Now, I am faced with the challenge of saving these files to a local folder on my computer. I hav ...