Issues with the rendering of vue-virtual-scroller are preventing proper display

I've been experimenting with https://github.com/Akryum/vue-virtual-scroller but I'm facing issues getting it to function properly. Can anyone point out what I might be doing incorrectly?

My server-side rendering uses pug / jade and despite not encountering any error messages, the content doesn't seem to render...

Pug / Jade

#test

  recyclescroller.scroller(:items='active_projects' :item-size='32' key-field='id' v-slot='{ item }')
    
    .user
         | {{ item.name }}

CSS

.user {
  height: 32%;
  padding: 0 12px;
  display: flex;
  align-items: center;
}

Javascript

Vue.component('RecycleScroller', VueVirtualScroller.RecycleScroller)

test = new Vue({

    el: '#test',

    data: {
           active_projects        : [{name : 'test'}]
          }
})
javascriptvue.jsvuejs2

Answer №1

Ensure that each item within Recyclescroller contains an id

The uniqueness of the items is determined by their respective id

Your list structure should resemble the following :

data () {
        return {
            active_projects: [
                {
                    name: 'test', id: 1
                },
                {
                    name: 'test', id: 2
                },
                {
                    name: 'test', id: 3
                },
                {
                    name: 'test', id: 4
                },
            ]
        }
    }

Doc - Important notes

If the items are objects, it is important for the scroller to be able to distinguish them. By default, it will search for an id field within the items. Alternatively, you can specify a different field name using the keyField prop.

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

Javascript encountering compatibility issues with certain versions of Internet Explorer; employing browser detection workaround

Unfortunately, Internet Explorer is causing issues when trying to execute this script (specifically the 'else' part). Despite numerous attempts, I have been unable to resolve it. $(document).ready(function(){ if (navigator.appName != "Micros ...

javascriptjquery

Attempting to provide varying values causes If/Else to become unresponsive

I've implemented a function that scans a file for a specific term and then outputs the entire line as a JSON object. Strangely, when I include an else statement in the logic, an error occurs: _http_outgoing.js:335 throw new Error('Can\& ...

javascriptjsonnode.jshttp

What is the best way to retrieve all dates that are older than 30 days using JavaScript?

I have the following code snippet as a reference and I'm attempting to retrieve a list of dates from 30 days before. What do I need to change? Date.prototype.addDays = function(days) { var newDate = new Date(this.valueOf()) newDate.s ...

javascriptjquery

AngularFire Google OAuth failing to retrieve the user's email address

I am trying to retrieve the email address from Google OAuth using AngularFire, but the popup is not requesting permission for the email. This code snippet is from the Firebase Google authentication documentation var ref = new Firebase("https://<your-f ...

javascriptangularjsfirebaseangularfire

Conceal the slider thumb within the material-ui framework

I've been attempting to conceal the slide thumb, initially without using a library. However, I started considering utilizing material-ui as it might make the process easier. Hence, I'm seeking assistance here. Below is my code snippet: import * ...

javascriptcssmaterial-uislider

One method to add up the variances of each pair, and then total the results of each pair using nedb

In my nedb database called trades.json, I am simulating stock trades with the following data: {"buySell":"BUY","currentPrice":431.55,"_id":"GyTaUKVOCa9x5APS"}, {"buySell":"SELL","cu ...

javascriptarraysmathforeachnedb

Using jQuery to duplicate a row and make modifications

I need to duplicate a row, make some modifications to the data, and then add it to the bottom of a table: $(document).ready(function(){ $("#show_new_rows_number").change(function(){ var table_body = $("tbody"); var master_row = table_b ...

javascriptjquery

Updating an array within an object using JSON

Check out the structure of my JSON response: "_id" : 537, "quizzes" : [ { "wk" : 1, "score" : [ 10 ] }, { "wk" : 2, "score" : [ 8 ...

javascriptjsonmongodb

Vue component not reflecting updated value from axios response

I am struggling to update the temp object after making an axios call. Any assistance would be greatly appreciated. This is the entire code snippet. I have implemented this component in a Vue application. Vue and components are new to me, so any guidance ...

vue.jsaxios

An Ajax call nested within another Ajax call

I've implemented an AJAX request to load my "home" page and "about" page into a designated "container" when a menu link button is clicked on my index.php. Now, I have three links on my "home" page and I want each of these links to open within the same ...

javascriptphpjqueryajaxinclude

The significance of README.md file in every folder within the standard project structure of Nuxt

Why is there a README.md file in each folder of the default project structure? Do we need to leave it there? ...

vue.jsvuejs2nuxt.js

"Verifying in Javascript results in the inclusion of the item in

Can you check out this checkbox... <input type="checkbox" name="num" id="1" value="1" class="input-hidden" /> <input type="checkbox" name="num" id="3" value="3" class="input-hidden" /> <input type="checkbox" name="num" id="6" value="6" c ...

javascriptphphtml

Vuejs - Trouble with Component Rendering on the Screen

I'm currently working on developing a Vue application for monitoring and managing budgets. I have a BudgetItems component that I intend to display in the /budget route. Although all other components and raw HTML are successfully rendering, this specif ...

vue.js

Utilizing Redux Reselect for Comment Filtering

Currently, I am attempting to filter and showcase comments that have a matching 'postID' with the current post id. Utilizing Redux/Reselect, the functionality works well but occasionally an error pops up indicating that post._id is undefined/null ...

javascriptreactjsreduxreselect

Creating a loader in Vue.js - step by step guide

Looking to implement a loading effect in VUE js with Laravel. I have a single page website built in Vuejs and I want to display a loader when changing routes or submitting a form. Whenever I navigate to another route or submit a form, there is a delay in ...

laravelvue.jsloaderpreloader

Show the time with AM/PM without displaying the year, month, or day

Currently, I am struggling to show the time as AM when my website loads using the format mm-dd-yyyy --:-- AM in a datetime-local input. The value attribute of datetime-local is causing some confusion for me. ...

javascripthtmlcss

Troubleshooting a Header Styling Problem in Shopify Theme Sections (Liquid)

I am encountering an issue with the header styling in a specific section of my Shopify website. The header is not displaying correctly as intended. Below is the code snippet I have implemented for the header along with its styling: Liquid Code: <hea ...

javascripthtmlcssliquid

Nuxt JS Route Changes Not Triggering Page Scroll to Top

How can I ensure that the page always scrolls to the top when routing changes in Nuxt? In an attempt to achieve this, I have added the following code to my app/router.scrollBehavior.js file: export default function (to, from, savedPosition) { return { x ...

vue.jsscrollnuxt.js

Executing a MongoDB query can only be successful by utilizing the copy and paste method

Recently, I encountered an unusual issue with MongoDB while attempting to query the database. Specifically, when running a query like db.departments.find({"key": "MEL 301"}), it returned no results. The MongoDB database is hosted on mLab, allowing me to v ...

javascriptnode.jsmongodb

What is the source of this error message "Exceeding maximum characters in string literal"?

Hey everyone! Sorry for the bother, but I'm a bit stumped on this issue. Within my view, I have the following code snippet: <fieldset> <dl> <dt> <label for="FormTypes">Form Type:</label> ...

asp.netjavascriptasp.net-mvcasp.net-ajax