Я подозреваю, что это связано с тем, что я не смог вытащить JS файл для vuetify правильно, но мне не удалось ни с чем справиться. Похоже, что некоторые функции CSS Vuetify, такие как события выделения списка, не работают в моем приложении, в которых я пытаюсь использовать Vuetify с Vue.js и Webpack.
Пример, который я пытаюсь реализовать, - это ящик навигации по умолчанию.
В моей реализации, зависание над элементом списка не вызывает изменение цвета фона или изменение типа курсора.
Мой код:
Main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import Vuetify from 'vuetify'
import vuetify_css from 'vuetify/dist/vuetify.min.css';
Vue.use(Vuetify)
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
App.vue
<template>
<div id="app">
<v-app>
<navigation></navigation>
<v-toolbar app></v-toolbar>
<v-content>
<v-container fluid>
<router-view></router-view>
</v-container>
</v-content>
<v-footer app></v-footer>
</v-app>
</div>
</template>
<script>
import Navigation from '@/views/Navigation'
export default {
name: 'app',
components: {Navigation},
}
</script>
<style>
</style>
Navigation.js
<template>
<v-navigation-drawer app permanent light>
<v-toolbar flat>
<v-list>
<v-list-tile>
<v-list-tile-title class="title">
Application
</v-list-tile-title>
</v-list-tile>
</v-list>
</v-toolbar>
<v-divider></v-divider>
<v-list dense class="pt-0">
<v-list-tile v-for="item in items" :key="item.title" >
<v-list-tile-content>
<v-list-tile-title>{{ item.title }}</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-navigation-drawer>
</template>
<script>
export default {
data () {
return {
items: [
{ title: 'Home', },
{ title: 'About', }
]
}
}
}
</script>
<style scoped>
</style>
Что странно, я вижу, что весь файл CSS Vuetify впрыскивается правильно как тег стиля webpack, и я не думаю, что переписываю любые пользовательские стили (в том, что у меня их нет!)
Что мне не хватает, чтобы правильно использовать стили Vuetify?
(какой-то посторонний код разделился, дайте мне знать, если вам нужно увидеть больше моих файлов/кода проекта)
Проблема в том, что вы не добавили обработчик для любого события мыши. Попробуйте просто добавить пустой:
<v-list dense class="pt-0">
<v-list-tile v-for="item in items" :key="item.title" @click="">
<v-list-tile-content>
<v-list-tile-title>{{ item.title }}</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>