Switching from using v-data-table to v-virtual-scroll

I am currently in the process of switching from using v-data-table to v-virtual-scroll, but I am struggling to determine the correct syntax for the virtual scroller. Can you assist me with this, please? I want to maintain the same display as before, but now with the virtual scroller implementation.

<div v-if="import_table.display">
           <v-data-table
                v-if="!hide_table"
                :headers="import_table.headers"
                :items="import_table.data"
                hide-default-footer
                :items-per-page="-1"
                dense
              > 

       <!--<v-virtual-scroll
            :headers="import_table.headers"
            :items="import_table.data"
            v-if="!hide_table"                        ---->**thats how i replaced** 
            :item-height="50"
            height="300"
          >-->


            <template v-slot:item="{ item, index }">
              <tr>
              <td>
            **CODE**
              </td>
              </tr>
            </template>
          </v-data-table>     <!--</v-virtual-scroll>-->

It seems like the issue may lie with the tr td tags. I attempted replacing them with v-item-content, action, but nothing is being displayed.

javascriptvue.jsvuetify.js

Answer №1

As per the information available in the documentation, the v-virtual-scroll component does not have a slot called item. It only has a default slot and does not include the headers prop.

If you wish to display items within the v-virtual-scroll component, you should follow this format:

<v-virtual-scroll :items="items"
                  item-height="50">
  <template v-slot="{ item, index }">
    <!-- Your item content goes here -->
  </template>
</v-virtual-scroll>

Additionally, please note that as of Vuetify 2.3.10, there is no option to set the tag for the virtual scroll. Therefore, using tr and td elements within it is not valid HTML. It is recommended to present it as a customized table.

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

What exactly is a doclet as defined in JSDoc documentation?

//Sample 1 /** * Here we have a simple function that returns a message * @param {String} msg The message to be returned * @returns {String} The message */ function showMessage(msg) { return msg } //Sample 2 /** * This is a function that also retur ...

javascriptjsdoc

What is the best way to combine and merge JSON objects that consist of multiple sub-objects?

I am working with a JSON response that contains multiple objects consisting of two main objects - datacenter and environment: "deployments": [ { "datacenter": { "title": "euw1", ...

javascriptjson

Generating a unique user ID similar to Zerodha's user ID using Node.js/JavaScript

For a project I'm working on, I need to create random and unique User IDs. I came across Zerodha's user IDs which are easy to remember. In Zerodha user IDs: The first two characters are always letters followed by four numbers. I want to generat ...

javascriptnode.jsnpm

I need the title to be filled with the input data and the content to be filled with the textarea data

import React from 'react'; export default class CreateNote extend React.component { constructor(props) { super(props); this.state = {note:{title:" ",content:" "} }; console.log(this.state); ...

javascriptreactjsstate

Using a JSON web token (JWT) for authorization on a json-server

I am currently working on developing a Node.js application that utilizes typicode json-server. My goal is to implement authorization within the app, where all public users have access to GET requests, but PUT, POST, and DELETE requests require a JWT token ...

javascriptnode.jsreactjsvue.jsjson-server

What is the best method for integrating Vuepress into a Nuxt project?

I'm currently working on integrating Vuepress into my Nuxt app. I followed the steps of adding Vuepress using yarn add vuepress@next -D and setting up a docs folder with a readme.md file inside. The issue: The project is only displaying the sidebar a ...

vue.jsnuxt.jsvuepress

update url to redirect hashbang with history.js

Upon further investigation, I have observed that history.js has the ability to automatically transform http://www.site.com/some/path#/other/path into http://www.site.com/other/path when used with a html5 enabled browser. While this feature is useful, ...

javascripthtmlbrowserhistory.js

Having trouble with Django's submit POST method for creating objects

Latest Updates: I have successfully implemented a feature where the page does not reload upon clicking the submit button. To achieve this, I filled out the form and inspected the page source code. The form structure was as follows: https://i.sstatic.net/ ...

javascriptdjangotwitter-bootstrap

Using Node.js and Express to import a simple JavaScript file as a router

Can anyone help me understand how to import the user.json json file into my user.js? I want the json file to be displayed when typing /user but I'm struggling with the new version of Node. index.js import express from 'express'; import body ...

javascriptnode.jsexpressrouter

Unable to attach information to document object model

I just started learning vuejs and I'm facing an issue with mounting the data of a component to the blade file. app.js Vue.component('example-component', require('./components/ExampleComponent.vue').default); const app = new Vue ...

laravelvue.js

Prevent users from viewing or editing profiles of other users

I need to enhance the security of my application by restricting users from accessing profiles of other users. route.js router.get('/currentUser/:username', userAuth, (req, res) => { User.findOne({ username: req.params.username }).the ...

javascriptnode.jsexpress

Tracking progress in a Rails job using Coffeescript

Recently, I came across a helpful gem called this gem, which allows for the seamless integration of bootstrap progress bars and the delayed job gem. The example provided by the creator uses .haml files, but since my project utilizes erb and coffeescript, I ...

javascriptruby-on-railscoffeescriptprogress-barbootstrap-4

Creating a custom ID for a Firebase POST request

Is it possible to assign a custom ID in Firebase when using the POST method? For example: { "users": { "user_one": { "username": "jdoe", "password": "123" } } } I'm currently working on a Vue.js project and I want to save ...

javascriptfirebasefirebase-realtime-databasevue.js

How can I choose records from collection 'x' in mongodb?

I need to fetch all fields from my database using an API call Here is my code: exports.objfields = async (req, res, next) => { try { var db = mongo.connection; var objeto = req.headers.objeto; const result = db.db.collection(objeto).find( ...

javascriptnode.jsmongodbapi

InvalidTypeError: The function 'state.map' cannot be applied

import React from "react"; import { useContext, useEffect, useRef, useState } from "react"; import noteContext from "../Context/notes/NoteContext"; import Addnote from "./Addnote"; import Noteitems from "./Notei ...

javascriptreactjs

I am looking to display multiple divs sequentially on a webpage using JavaScript

Looking to display a rotating set of alerts or news on my website. The goal is to show each news item for a certain number of seconds before moving on to the next one in line. However, I'm new to javascript and need help creating a code that will cont ...

javascripthtml

When creating a new instance of a class, I make sure to use the

I am facing an issue when trying to call a function from ClassA within my mainClass, and vice versa. I have attempted using .bind() and .call(), but it only works when I use .bind(this) or .call(this) on functions, not when I try to instantiate a new class ...

javascriptnode.jsecmascript-5ecma

Interested in creating a weather application that changes color based on the time of day

My attempt to create a weather app with a glowing effect has hit a roadblock. I want the app to glow "yellow" between 6 and 16 hours, and "purple" outside of those hours. I have assigned classes for AM and PM elements in HTML, and styled them accordingly i ...

javascripthtmlcssbootstrap-4

Error encountered: The Bootstrap modal() function is showing as undefined when using npm modules

Every time I attempt to call $("#myDiv").modal(), an error occurs. The error message reads: Uncaught TypeError: undefined is not a function This error has popped up in different scenarios, with various parameters being passed to modal(). Many solutions o ...

javascriptjquerynode.jstwitter-bootstrap

Using Modal Functions in AngularJS Controller

I have been working on a project that utilizes the ui.bootstrap. As per the instructions from the tutorial I followed, my setup looks something like this: 'use strict'; angular.module('academiaUnitateApp') .controller('EntryCtr ...

javascriptangularjstwitter-bootstrap