Creating a Vue.js v-for loop to dynamically display a series of DIVs in segments

Here is the code I am currently working with:

<div class="container-fluid" id="networdapp" style="display:none;">
    <div class="row" >
        <div v-for="(result,i) in results" :key="i" class="col-sm-6" >
            <div class="card m-3 h-240  bg-light" >
                <div class="card-header text-center" > {{ result.title }} </div>
                <div class="card-body" style="height:200px" >
                    <p class="card-text" v-html="result.prevDesc" ></p>
                </div>
                <div class="card-footer bg-transparent border-info">
                    <a href="/details" class="btn btn-info" @click="getData(i)" >Details</a>
                </div>
            </div>
        </div>
    </div>
</div>

I am looking to modify these generated col-sm-6 divs using a v-for loop in Vue.js. My objective is to initially make them all invisible, then gradually display them in groups of 5 using an event handler. Each click will reveal the next set of 5 divs, and so on. I believe I need to manipulate them programmatically. The content within {{result.title}} and result.prevDesc is functioning correctly.

javascripthtmlcssvue.jsvuejs2

Answer №1

If you want to display a list of results in your Vue application, you can maintain an array called "results" and another one named "shownResults". Initially, the "shownResults" array will be empty. When you click on the "showMore" button, 5 results will be added to the "shownResults" array and displayed. Clicking the button again will show 10 results, and so on.

new Vue({
  el: '#app',
  data() {
    return {
    bound:0,
       results:[
       {
       title:"title1",
       prevDesc:"desc1"
       },
        {
       title:"title2",
       prevDesc:"desc2"
       },
         {
       title:"title3",
       prevDesc:"desc3"
       },
         {
       title:"title4",
       prevDesc:"desc4"
       },
         {
       title:"title5",
       prevDesc:"desc5"
       },
         {
       title:"title7",
       prevDesc:"desc7"
       },
         {
       title:"title8",
       prevDesc:"desc8"
       }
       ],
       shownResults:[]
       } 
  },
  methods:{
  showMore(){
  this.bound+=5;
     this.shownResults=this.results.slice(0,this.bound);
  },
    getData(i){
    
    }
  },
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" >
<div id="app">
<div class="container-fluid" id="networdapp" >
 <div class="row" >
    <div v-for="(result,i) in shownResults" :key="i" class="col-sm-6" >
      <div class="card m-3 h-240  bg-light" >
         <div class="card-header text-center" > {{ result.title }} </div>
           <div class="card-body" style="height:200px" >
             <p class="card-text" v-html="result.prevDesc" ></p>
           </div>
             <div class="card-footer bg-transparent border-info">
               <a href="/details" class="btn btn-info" @click="getData(i)" >Details</a>
             </div>
         </div>
    </div>
    <a class="btn btn-info" style="height:40px" @click="showMore" >Show more</a>
    
  </div>
</div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Validating IDs by comparing them with one another. If the IDs do not match, an error message will be displayed. If they do match, the corresponding data will

Contents: Overview of the code's functionality. CODE Achievements. Bugs Expected vs. Actual Output Attempts to troubleshoot the errors 1. Overview of the Code's Functionality This system functions as a clock in and out mechanism utilizing an R ...

javascriptphpjqueryajax

What steps do I need to take to activate HTTPS in Vue using Axios?

The current version of Vue being used is Vue3, while the Axios version is 0.24.0. When attempting to enable HTTPS using a specific method, an error message indicating an invalid certificate was encountered. const axios = require('axios') ...

vue.jshttpsaxios

problem with selection of date and month in dropdown list with jquery

Recently, I've been dabbling in jQuery and decided to create two list boxes using it. One box contains dates while the other contains months. It's quite handy since I need them in different sections of my HTML page. However, when attempting to en ...

jqueryhtmlcss

placing a dropdown menu below the search bar

Let's say I have a container with an input search field. My goal is to position a select dropdown right below the search input, ensuring that the dropdown has the same width as the search input (similar to autocomplete functionality). Here's what ...

htmlcsstwitter-bootstrapbootstrap-4

"What is the best way to retrieve the id of the element that triggered a JavaScript onclick

I'm facing an issue with my GridView where I have information displayed in each row. When a user clicks on a row, more related information is supposed to be shown in a separate DIV. However, I am unable to target the specific row when trying to change ...

javascriptc#getelementbyid

Error loading code. Works when manually pasted, but not when executed with JavaScript

After some trial and error, I found that this code works perfectly if I manually copy the content from the class isotope in 1.php to the class grid on this page. However, when I try to use JS to do the same thing, it mysteriously stops working. Any sugge ...

javascriptjqueryjquery-isotope

Transform Dynamic Array to JSON structure

I am currently developing a feature in my SvelteKit application that allows users to create custom roles for themselves. Users can input a role name and add it to an array, which is then displayed below. https://i.stack.imgur.com/oUPFU.png My goal is to ...

javascriptarraysjson

Tips for integrating CKEditor into an Angular 4 project

To start using CKEditor, I first installed it by running the command npm install ng2-ckeditor. Next, I included ckeditor.js in my index.html file. I then imported { CKEditorModule } from 'ng2-ckeditor'; in my app.module.ts file. After setup, I ...

javascriptangularckeditorangular-formsckeditor5

Enhance the functionality of jqGrid by customizing key bindings for arrow and tab keys

In order to enhance my jqGrid functionality, I am seeking to implement the ability for users to press different keys for specific actions. For example, pressing Enter should save data (which is currently working fine), while pressing the left arrow key sho ...

javascriptjqueryhtmljqgridfree-jqgrid

Is there a way to trigger a modal to open in VueJS with Bootstrap?

I have been attempting to trigger a modal in my Vue Template using bootstrap. However, I am encountering an issue where the modal does not appear when I use jQuery on it. Below is the code snippet: <template> <div id="app_religion"> ...

laravelvue.js

When you hit a certain point on the website, the scrolling momentarily pauses

Upon refreshing the page and scrolling down, I notice that the website experiences a brief lag for a few milliseconds before continuing as normal. Oddly enough, this issue only occurs after refreshing the page. Any suggestions on how to resolve this? Th ...

javascripthtmlcssweb

The validation using regex is unsuccessful when the 6th character is entered

My attempt at validating URLs is encountering a problem. It consistently fails after the input reaches the 6th letter. Even when I type in "www.google.com," which is listed as a valid URL, it still fails to pass the validation. For example: w ww www ww ...

javascriptregextypescriptalgorithmvalidation

To access a restricted selection of images stored in Firebase

Is there a way to load additional images from Firebase by clicking a button? I created a function that looks like this: onLoadMore() { if (this.all.length > 1 ) { const lastLoadedPost = _.last(this.all); const lastLoadedPostKey = lastLoadedP ...

javascriptangularfirebase-realtime-database

Use JavaScript to gather various data forms and convert them into JSON format before transmitting them to PHP through AJAX

My understanding of JSON might be a bit off because I haven't come across many resources that discuss posting form data via JSON/AJAX to PHP. I often see jQuery being used in examples, but I have yet to delve into it as I've been advised to firs ...

phpjavascriptajaxjson

Ways to troubleshoot React JSX/HTML input issue displaying as -$NaN.undefined

https://i.sstatic.net/1xIvb.pnghttps://i.sstatic.net/aeQrS.pngI'm currently facing an issue while trying to implement an input field that subtracts a number from another computed value within an HTML table setup. I've noticed that everything work ...

htmlreactjs

Increase the quantity with animation

I am attempting to increment a number within an element on the page. However, I require the number to have a comma included while the increment should only increase by 1 digit every second. The code is currently functional, but I am facing a dilemma regar ...

javascriptjquery

Having trouble with the ajax cache not working properly when trying to load an image

I am attempting to dynamically load an image from the server every time a button is clicked using a GET request. However, I am facing an issue where the cached image is being loaded instead of the latest version. Below is the code I am currently using: & ...

javascriptjqueryajax

User missing in the transition from POST to GET

My journey with Node has just begun, and I decided to delve into the Rocket Rides demo available on GitHub. While exploring the pilot sign-up feature on the web app, I encountered a roadblock when trying to implement a similar functionality for passenger s ...

javascriptnode.jsexpress

Accessing new information seamlessly without the need for page refresh

For optimal mobile viewing of my website, I am considering implementing a select element. Here are the available options: HTML: <select name="select-choice-8" id="select-choice-nc"> <optgroup label="News"> & ...

javascriptjqueryhtmlajaxoptgroup

Use the regex tag in a React component to find a specific tag by name within two different possible

Looking for a regex that can identify <Field ...name="document"> or <FieldArray ...name="document"> within a multiline text string so they can be replaced with an empty string. The text string is not formatted as HTML or XHTML, it simply conta ...

javascriptnode.jsregex