Tips for recognizing when Vuetify's v-autocomplete has reached the final scrolled item

I am working with a Vuetify v-autocomplete component and I need to implement a feature where I can detect when the user reaches the last item while scrolling, in order to load more items without the user having to manually type for search:

// component.vue
<template>
  <v-autocomplete
    ref="myAutocomplete"
    v-model="selectedItem"
    autocomplete="off"
    :items="items"
    no-filter
    :label="$t('unit')"
    rounded
    outlined
    item-text="name"
    return-object
  />
</template>

I have searched through available props and events, but couldn't find anything that would assist me in achieving this functionality.

javascriptvue.jsvuetify.js

Answer №1

To solve the issue, I implemented a strategy of monitoring scroll events on the inner v-autocomplete's v-menu__content element:

// component.vue
export default {
  ...,
  // listener is set at the mounted hook
  mounted() {
    const component = this.$refs.myAutocomplete;
    component.onScroll = this.onScroll(component);
  },

  // the method structure looks like this:
  methods: {
    onScroll(component) {
      // function to recursively find the specified child element
      const findChildren = (elem, name) => {
        if (elem.$el.className.includes(name)) return elem.$el;
        let i = 0;
        let children;
        for (i; !children && i < elem.$children.length; i++) {
          children = findChildren(elem.$children[i], name);
        }
        return children;
      }

      // locate the 'v-menu--content' element within the v-autocomplete component
      const vMenuContent = findChildren(component, 'v-menu__content');

      // retrieve scroll values
      const a = vMenuContent.scrollTop;
      const b = vMenuContent.scrollHeight;
      const c = vMenuContent.clientHeight;

      // verify if it is fully scrolled
      const isScrolled = (a / (b - c)) === 1;
      if (!isScrolled) return
      // trigger loading more items as last item is reached...
    },
  },

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

Tips for linking a Vue event to a dynamic element within the methods section of a Vue component

When working with HTML table rows, you may need to update the row with either SPAN or NA based on certain conditions. However, I am facing an issue where Vue onclick is not functioning as expected. new Vue({ el: '#app', methods: { onSelect:f ...

vue.jsvuejs2

JavaScript issue: "No relay configuration found" error specifically occurs in Internet Explorer versions 7 and 8

Encountering issues with loading JavaScript only on specific pages in Internet Explorer. Safari, Firefox, and Chrome render the page correctly. Debugging revealed the following errors: 1) No relay set (used as window.postMessage targetOrigin), cannot send ...

javascriptjqueryinternet-explorerdebuggingpostmessage

Angular is using the previous parameter value upon clicking the button

I'm currently working on implementing a button that, when clicked, triggers a function sending a parameter to my server. Here is what I have so far: <table class="table table-hover"> <thead> <tr> <th>Id</th& ...

javascriptangularjsweb

JavaScript Radio Buttons

Below are the different radiobuttons: Apple <input type="radio" id="one" name="apple" data-price="10" value="light"/> Light <input type="radio" id="two" name="apple" data-price="20" value="dark" /> Dark <input type="text" id="appleqty" name ...

javascripthtmladdition

Excel-like JSON Data Grid using jQuery

I am in need of a data grid similar to an Excel sheet. My primary focus is on filtering capabilities only (refer to the image below). Can anyone offer assistance with this? ...

javascriptjqueryajaxjson

Password Field Validation in React

<TextField id="outlined-basic" label="Password" variant="outlined" /> Can anyone assist me in implementing password validation using an onchange function? I am seeking help with the ...

javascriptreactjsformsvalidationmaterial-ui

Show or hide specific elements based on parameters using ng-show in Angular

One challenge I am facing is how to manage a menu with multiple buttons that open submenus without using a massive switch statement in my code. Instead, I want to try something different: In the HTML file, I call the function toggleVis and pass the nam ...

javascriptangularjs

The method defined in the external script for React is not recognized

For my React project, I am trying to import BlotterJS. In order to do so, I have added the following script in my index.html file: <script crossorigin src="https://rawgit.com/bradley/Blotter/master/build/blotter.min.js"></script> Wit ...

javascriptreactjs

Can Vue.js automatically refresh the display when there are changes in a third-party JSON file?

I'm attempting to achieve a specific goal using Vue, but I'm uncertain if it's feasible given my current struggles in obtaining the desired outcome: An API endpoint returns an array containing multiple objects. While I am able to successfu ...

javascriptvue.jsvuejs2

Tips on embedding a textField into a designated row within a table by clicking a button with the help of reactjs and material ui

I need assistance adding multiple text fields to a specific row within a table when a designated row's "add" button is clicked. Currently, I am able to add a text field when the button is clicked, but it adds the text field to every row in the table. ...

javascriptreactjsmaterial-ui

MVC4: Exploring the Strategy for Handling Nested Ajax Requests

Creating a form in a web application, I implemented filtering data based on user selection using AJAX to retrieve JSON nested data from BankPlans table. However, I encountered an issue when attempting to fetch all required documents for each bankID from an ...

javascriptjqueryajaxasp.net-mvcasp.net-mvc-4

Having Trouble Accessing Custom Screen in React Navigation?

The navigation from the Order screen to the Home Screen is not working as expected. Every screen in the route works, except for the Home screen, which just navigates back to the Map screen. I have clearly instructed to navigate to Home. Here is the curren ...

javascriptreactjsreact-nativereact-reduxreact-navigation

VueTablePlus dropdown filter options for Vue.js version 2

I am facing an issue with populating dropdown options on vue good table. My approach involves making an API call to fetch the possible values for the dropdown and then assigning them to the column filter. However, I am struggling to make it work. <vue ...

javascriptvue.jsvue-good-table

Accessing the Div id stored in a session parameter

Is there a way to store the id (div id) into a session variable? This is an example of my code below: <div class='fieldRow'>Options </div> <div id="abcde"></div> <div class='Row'> <?php $user_typ ...

phpjavascriptjquery

Storing JSON data in a SQL database

Storing JSON in an MsSql database and passing it to Javascript via a PHP script has been working perfectly. However, when trying to include extra text that is not part of the formatting string, like d, h, a, or p characters, encountered some challenges. Lu ...

javascriptphpjquerysql-serverjson

Implement custom material-ui styles exclusively for mobile displays

When working with Material-UI in react, I am wondering if there is a way to apply theme provider overrides only in mobile view. Specifically, I am using the <Card> component and would like to remove the boxShadow of the card when it's displayed ...

javascriptreactjsmaterial-ui

Using axios to modify and enhance the HTML content of a webpage

Utilizing axios and an API, I am able to retrieve a page's HTML, make edits to it, and then send it back via a POST request to the API. While successful in retrieving and editing the HTML content, I'm encountering difficulty in updating or changi ...

javascriptnode.jsaxios

Tips for configuring identical libraries under different names

As a Japanese web developer, I struggle with my English skills, so please bear with me. Currently, I am utilizing an npm library. I have forked the library and made some modifications to it. In order to incorporate these changes, I updated my package.js ...

javascripttypescriptnpm

Dealing with the validation of two forms on a single webpage: Strategies and Solutions

In a popup, there are two forms that alternate display - one for editing (loaded via ajax) and one for creation. Using jQuery validation, I aim to show hints for both editing and field submission. The validation includes ensuring time spans do not overla ...

javascriptjqueryvalidation

Create a function that takes advantage of a Promise to resolve its actions

In the asynchronous function provided below: export default async function getUserNames(id: string[]): Promise<string[]> { let userNames: string[] = []; // Additional actions such as service calls are performed here... return userNames; ...

javascriptnode.jstypescriptpromise