Vue.jsとWebpackでVuetifyで機能しているCSSがすべてない

Question

これは、私がvuetifyのJSファイルを適切に取得できなかったと思われますが、何かエラーにドリルダウンすることはできません。私がVue.jsとWebpackでVuetifyを使用しようとしている私のアプリでは、ハイライトイベントのようなVuetifyのいくつかのCSS機能が機能していないようです。

私が実装しようとしている例では、リスト項目の上にマウスを移動すると、背景色の変更やカーソルの種類の変更をトリガすることはありません、私の実装ではdefault navigation drawer.

です。

マイコード：

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> 

VuetifyのCSSファイル全体がwebpackのスタイルタグとして正しく注入されていることがわかりました。カスタムスタイルを上書きしているとは思いません。

私は正常に動作しVuetifyのスタイルを取得するために何をしないのですか？

（いくつかの余分なコードを剥離、あなたが私のプロジェクトファイル/コードの詳細を参照する必要がある場合は私に知らせて）

Answer 1

問題は、あなたが任意のマウスイベントのハンドラを追加しなかったことです。空を追加してみてください：

<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>