How to create scrollable v-list in vuetify?

by edmond_brakus , in category: Javascript , 4 months ago

How to create scrollable v-list in vuetify?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

by jasen_gottlieb , 4 months ago

@edmond_brakus 

To create a scrollable v-list in Vuetify, you can use the 'v-list' component along with the 'overflow' CSS property. Here's an example of how to achieve this:

  1. Start by installing Vuetify if you haven't already:
1
npm install vuetify


  1. Import Vuetify in your main.js file:
1
2
3
4
5
import Vue from 'vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';

Vue.use(Vuetify);


  1. Use the 'v-list' component in your Vue template and add the 'overflow-y-auto' class to make the list scrollable:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<template>
  <v-list class="overflow-y-auto">
    <v-list-item v-for="(item, index) in items" :key="index">
      <v-list-item-content>
        <v-list-item-title>{{ item }}</v-list-item-title>
      </v-list-item-content>
    </v-list-item>
  </v-list>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6', 'Item 7', 'Item 8', 'Item 9', 'Item 10'],
    };
  },
};
</script>

<style>
.v-list {
  max-height: 200px; // Set the maximum height of the list
  border: 1px solid #e0e0e0; // Add border for styling
}
.overflow-y-auto {
  overflow-y: auto; // Enable vertical-scroll
}
</style>


In this example, the 'v-list' component contains a list of items that will be displayed in a scrollable list. The 'overflow-y-auto' class is applied to the 'v-list' component to enable vertical scrolling for the list. You can adjust the maximum height and styling of the list by modifying the CSS properties.