Are you looking for a way to detect scrolling events on the v-data-table component in Vuetify framework?
I am referring to the scenario where the table has a fixed height, causing the table body to scroll.
<v-data-table
fixed-header
:height=400
:headers="headers"
:items="desserts"
item-key="name"
disable-pagination
hide-default-footer
></v-data-table>
To access the table DOM element after Vue has been mounted, simply refer to it using "this" keyword and proceed from there. Take a look at the mounted hook provided below for reference.
<template lang="html">
<div class="graph-content">
<v-data-table v-show="topArtistUplifts.length" id="topUpliftTable" class="data-table-custom"
:headers="tableHeaders" :items="topArtistUplifts" fixed-header :height="tableHeight"
:items-per-page="-1" hide-default-footer :mobile-breakpoint="0">
<template v-slot:item.artist_name="{ item }">
<span>
<router-link :to="{ name: 'Artist', query: { artistId: item.artist_id, ...linkQuery }}"
class="artist-link inline">
{{ item.artist_name }}
</router-link>
</span>
</template>
<template v-slot:item.absolute_number="{ item }">
<span>+{{ getAbbreviatedNum(item.absolute_number) }}</span>
</template>
<template v-slot:item.relative_number="{ item }">
<span :class="percentChangeStyle(item.relative_number * 100)">{{ percentChangeFormat((item.relative_number * 100).toFixed(2)) }}</span>
</template>
</v-data-table>
<div class="no-notifs full-height" v-show="!topArtistUplifts.length">
No uplift to report yet – please check back soon.
</div>
<Loader v-if="updating.topArtistUplifts" :height="50"/>
</div>
</template>
<script>
methods: {
handleUpliftScroll(e) {
console.log('yoooo i'm a table scroll event: ', e)
},
},
mounted() {
const tableWrapper = this.$el.children[0].children[0]
tableWrapper.addEventListener('scroll', this.handleUpliftScroll)
}
</script>
Check out this code snippet:
const app = new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
desserts: Array.from({ length: 5000 }).map((v, k) => ({
name: `#${k}`,
calories: 518,
}),
headers: [
{ text: 'Dessert', value: 'name' },
{ text: 'Calories', value: 'calories' },
]
}
},
mounted() {
document.addEventListener('wheel', this.onScroll)
},
methods: {
onScroll() {
console.log('scrolling')
}
}
})
I am new to HTML and JavaScript, and I'm trying to modify the JavaScript code below so that when I reload the page, it retains the most recent active tab instead of defaulting back to the first tab. Currently, if I click on the second tab for "Paris" ...
console.log(mathjs.evaluate("(goodCount/(goodCount+reject_count))>0.99", { goodCount: 0, reject_count: 0, Total_Planned_time: 10 })) I am facing an issue where if both goodCount and reject_count are zero, this function returns NaN. Howe ...
Let me set the stage for you: We're dealing with a bank website here. So, whenever a user wants to click on an external link (could be to a Facebook page or a partner website), we need to have a notification box pop up saying "You are about to lea ...
Within my mongodb database, I have two Tables: GstState Store While working on my Store form, I encountered an issue where the JSON response was returning an undefined id when trying to select a state based on country via an ajax call to fetch GstStates ...
My code utilizes the setInterval function to increment mytime by 10 every 5 seconds. In theory, I should see a sequence like 1 11 21 31 41... However, the actual output is 1 11 31 71 151 311... <!DOCTYPE html> <html> <head> <met ...
In my database, I have Arabic sentences that contain decimal unicodes for quotation marks and other elements. For example, here is a sample text: "كريم نجار: تداعيات “كورونا” ستغير مستقبل سوق السي ...
When looking at the code snippet provided in .../pages/_app.js, the Component refers to the component that is being exported from the current page. For instance, if you were to visit , the exported component in .../pages/about.js would be assigned as the ...
Currently, I am utilizing the router feature from Next.js by importing useRouter from next/router. I am currently facing an issue where the page automatically scrolls to the top when changing the query parameters in the URL. Is there a solution available ...
I am looking to display a placeholder image while the actual image is being loaded. I have tried using the ng-image-appear plugin. The issue I'm facing is that the placeholder image does not appear for img elements inside ng-repeat, although it works ...
Trying to add a click event to Google Map markers in my Cordova app has proven to be quite challenging. The recommended ways mentioned in the documentation don't seem to work, unless I make the marker draggable - which is not an option for me. It seem ...
I am currently working with JSON data retrieved from which I am storing in a variable. Despite my limited experience with JSON/JS, I have been unable to find a solution through online searches. Here is the code snippet: function checkMojang() { var moj ...
In my current setup, I am working with a controller that contains the value $scope.colorHex. As an example, I am utilizing the directive colorpickerTooltip, and within its template, I am calling another directive: <colorpicker ng-model="colorHex">&l ...
Is there a way for a specific form component to function as radio buttons, with only one option selectable at a time, without displaying the actual radio bullets? I am looking for alternative presentation methods like highlighting the selected option or ...
Working on these codes has been quite a challenge for me. I have recently embarked on a JavaScript journey as a beginner and attempted to create a stopwatch project. However, it seems like I may have missed the mark with the logic or implementation somewhe ...
index.js: import Vue from "vue"; import Axios from "axios"; import App from "./App.vue"; import router from "./router"; import store from "./store"; const axios = Axios.create({ baseURL: process.env.VUE_APP_BASE_URL }) Vue.prototype.$http = axios; n ...
-- Hey there! Dear Reader, if navigating Tumblr isn't your cup of tea, let me know and I'll provide more detailed instructions! I recently ran into some glitches on my Tumblr page while using the default theme 'Optica'. Whenever I tri ...
After creating a Nuxt3 in static mode, I want to preview it without having to push it to Netlify every time. My nuxt.config.js remains unchanged: import { defineNuxtConfig } from 'nuxt' export default defineNuxtConfig({ }) However, when trying ...
While working on my React application, I encountered a situation where I needed to read the value for translation from a file stored in the public folder. The files were saved at However, due to the dynamic nature of our data, we decided to store it in a ...
I'm looking to receive a callback once the click event has finished in the original function. <input type="radio" onchange="changefun()" /> function changefun() { // some code will be done here } on another page $(document).on('input: ...
I am currently experimenting with Vuetify and exploring the usage of v-list-group. I am curious to know if there is a way to prevent the grouping behavior for items that do not have any children? <template> <v-layout fill-height> ...