Не все CSS работают в Vuetify с помощью Vue.js и Webpack.

1

Я подозреваю, что это связано с тем, что я не смог вытащить 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, и я не думаю, что переписываю любые пользовательские стили (в том, что у меня их нет!)

Изображение 174551

Что мне не хватает, чтобы правильно использовать стили Vuetify?

(какой-то посторонний код разделился, дайте мне знать, если вам нужно увидеть больше моих файлов/кода проекта)

Теги:
vue.js
webpack
vuetify.js

1 ответ

2
Лучший ответ

Проблема в том, что вы не добавили обработчик для любого события мыши. Попробуйте просто добавить пустой:

<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>
  • 0
    Да, это исправило это. Из любопытства, как получилось?
  • 0
    @ komali_2 Что ты имеешь в виду "как получилось"? ))
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню