У меня проблема с тем, что Vuetify не ломает мои флексбоксы, как ожидалось при просмотре на маленьком экране. Я ожидаю, что при просмотре на маленьком экране форма разбивается на 3 части, каждая из которых охватывает 12 столбцов. Однако, что происходит, он просто сохраняет свой размер от оригинала. Он не складывается вертикально, как ожидалось. Код шаблона ниже;
РЕДАКТИРОВАТЬ: я могу сказать, что vuetify обновляет точки останова, но макет не меняется. Если установить для этого вычисляемое свойство. $ Vuetify.breakpoint.lgandup, я вижу, что при изменении размера экрана логическое значение изменяется на false, когда оно должно, и обратно на true, когда должно. Но макет не меняется.
РЕДАКТИРОВАТЬ: я обновил свой вопрос с дополнительной информацией и попытался включить все соответствующие файлы.
РЕДАКТИРОВАТЬ: Я хочу добавить, что я решил небольшую работу, добавив 'wrap' .. <v-layout row wrap> однако кажется, что это не понадобится, так как я уже говорю vuetify, чтобы разбить это на полный 12 col col на маленьких экранах, поэтому не нужно ничего оборачивать. Все еще ищите больше понимания здесь.
main.js
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import '@mdi/font/css/materialdesignicons.css'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
// Override default theme for Vuetify
Vue.use(Vuetify, {
iconfont: 'mdi',
theme: {
"primary": "#673ab7",
"secondary": "#757575",
"accent": "#d500f9",
"error": "#ff1744",
"info": "#d500f9",
"success": "#4caf50",
"warning": "#ff9100"
}
})
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
app.vue
<template>
<div id="app">
<v-app>
<nav-draw/>
<nav-bar/>
<v-content>
<v-container fluid>
<v-layout row>
<v-flex x12 sm12 md12 lg1 xl1>
Test
</v-flex>
<v-flex xs12 sm12 md12 lg9 xl9>
{{ this.$vuetify.breakpoint.mdAndDown }}
</v-flex>
<v-flex xs12 sm12 md12 lg2 xl2>
{{ this.$vuetify.breakpoint.lgAndUp }}
</v-flex>
</v-layout>
</v-container>
</v-content>
<v-footer app>2019 .com</v-footer>
</v-app>
</div>
</template>
<script>
import NavDraw from '@/components/NavDraw'
import NavBar from '@/components/NavBar'
export default {
components: {NavDraw, NavBar }
}
</script>
public/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="shortcut icon" href="<%= webpackConfig.output.publicPath
%>favicon.ico">
<title>FranchiseFaves</title>
</head>
<body>
<noscript>
<strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
Любая помощь приветствуется!