Часто задаваемые вопросы
Мой код не работает - что мне делать?
Во-первых, убедитесь, что вы используете последнюю версию Vue.js и Vuetify. Попробуйте воспроизвести его в codepen, используя следующий шаблон. Если вы не можете воспроизвести проблему вне своей среды, это обычно означает, что проблема возникает локально. Если вы всё ещё не можете решить свою проблему, предоставьте код и введите #need-help в community.
Я получаю ошибку, подобную следующей:
Error in ./node_modules/vuetify/src/dir/file.js Module parse "failed": Unexpected token (<lineno>:<characterno>)
Если вы используете IDE, например IntelliJ IDEA или WebStorm, он часто добавляет автоматический импорт, указывающий на каталог vuetify/src/
для компонентов, которые вы используете. Измените путь импорта с vuetify/src/
на vuetify/es5/
Моё приложение выглядит неправильно
Vuetify требует использования компонента v-app
. Он должен обернуть всё ваше приложение и стать центральной точкой для большинства функциональных возможностей фреймворка. Если по какой-либо причине вы не можете использовать этот элемент, вы можете имитировать его из атрибутов и классов. Установите для атрибута data-app
значение true для самого высокого доступного элемента (не включая body) и application application - {light | dark} классов.
Тема Dark или Light не работает.
Vuetify требует точки монтирования для выполнения таких задач, как стилизация темы. Убедитесь, что у вас есть приложение v-app
. В случае, если это невозможно, по какой-либо причине вы можете имитировать своё поведение, применяя data-app и class = application application - light (или dark) к самому элементу родителю, который в вашем приложении.
Меню/Диалог/Панель навигации не открывается должным образом.
Убедитесь, что ваши компоненты обёрнуты элементом v-app
. Если вы используете элемент для активации компонента, который не помещён в слот activator , убедитесь, что вы прекратили распространение события щелчка. Эти компоненты используют директиву v-external-click
и немедленно закрываются.
Полоса прокрутки показывается, хотя мой контент не переполняется вертикально.
Vuetify по умолчанию включает панель прокрутки html. Это выбор дизайна и неоднократно обсуждался. Есть плюсы и минусы того, что они имеют и не имеют этого, и на данный момент голосование за то, чтобы оставить его как есть. Если вы хотите отключить эту функцию, просто добавьте html {overflow-y: auto}
в ваш файл стиля.
Как центрировать вертикально?
Примените fill-height prop к v-container
. Этот класс-помощник обычно добавляет только height: 100%, но для контейнера он также ищет дочерний v-layout
и применяет необходимые классы для вертикального центрирования содержимого.
Моя /_ ссылка активна, когда я на _/home странице
Добавьте exact к ссылке, которая указывает на абсолютный /. Для получения дополнительной информации об этом вы можете посетить официальный маршрутизатор Vue документация.
Моя страница на мобильном телефоне не адаптивная
Проверьте, что <head>
вашего index.html содержит необходимые метатеги.
Как я могу использовать шрифты Awesome Icons или Material Design Icons (mdi)?
Вы должны добавить шрифты в свой index.html или иным образом импортировать их в свой проект
MDI: Material Design Icons
FA: Font Awesome
Мой диалог закрывается сразу после нажатия кнопки
Если вы не используете слот activator для v-menu
иv-dialog
, вы должны вручную остановить propagation события click. Для этого просто добавьте модификатор .stop в событие click, `@click.stop ="myMethod"`.
Относительные изображения не работают в компонентах v-card
Vue loader автоматически преобразует относительные пути в требуемые функции. К сожалению, это не тот случай, когда речь идёт о пользовательских компонентах. Вы можете обойти эту проблему, используя require
.
<v-card :src="require('path/to/img/img.jpg')">