Как создать v-список для изменения стиля при наведении курсора и показать полосу прокрутки с помощью vuejs / vuetify? - PullRequest
Новая
       21

Как создать v-список для изменения стиля при наведении курсора и показать полосу прокрутки с помощью vuejs / vuetify?

0 голосов
/ 23 сентября 2019

Я пытаюсь выучить vuejs, используя vuetify.

Я следовал за первый пример этой документации , чтобы создать список с элементами, которые я получаю от родительского компонента.

Но результат не работает, и список выглядит следующим образом Список выглядит следующим образом 

<template>
    <v-card mx-auto height="400" width="520" wrap>
        <v-list id="list" dense max-height="400" v-model="item">
            <v-list-item-group v-model="model">

                <v-list-item v-for="link in links" :key="link.index" >

                    <v-list-item-content>
                     <v-list-tile-title v-text="link.text"></v-list-tile-title>
                    </v-list-item-content>
                </v-list-item>
            </v-list-item-group>
        </v-list>
    </v-card>
</template>
<script>
    export default {
        data(){
            return {
                links: [],
                model: 1
            }
        },
        props:['listProps'],
        mounted(){
            this.links = this.listProps
        },

    }

</script>

<style scoped>
    .v-list {
        height: 400px;
        /*overflow-y: auto;*/
        overflow: -moz-scrollbars-vertical; /* For FF */
        -ms-overflow-y: scroll; /* For IE */
        overflow-y: scroll; /* For others & old IE */
    }
    .v-card {
        height: 100%;
    }

</style>

, где ссылка - это массив с json-подобным: [{text: "itemA" index: 1, ...}]

Я заметил, что если изменить for: {{link.text}}, он выглядит лучше, но не зависает и не показывает полосу прокрутки.

Что я делаю не так?

...