Question

我在使用Vuetify时遇到问题，即在小屏幕上查看时，Vuetify没有破坏我的伸缩盒。我希望在小屏幕上查看时，表单可以分为3个部分，每个部分跨越12个列。但是发生的是它只是保留了原始尺寸。它不会像预期的那样垂直堆叠。模板代码如下；

编辑：我可以说vuetify正在更新断点，但布局不会改变。如果我将计算的属性设置为this。$ vuetify.breakpoint.lgandup，我可以看到在更改屏幕大小时，布尔值在应更改为false时应更改为true。但是布局不会改变。

编辑：我已经用更多信息更新了我的问题，并尝试包含所有相关文件。

编辑：我想补充一下，我已经通过添加'wrap'解决了一个小问题。<v-layout row wrap>但是，由于我已经在告诉vuetify打破这一点，所以似乎不需要这样做了。在小屏幕上变成完整的12列跨度，因此应该没有任何东西可以包装。还在这里寻找更多的见识。

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>

感谢您的帮助！

Answer 1

尝试删除app.vue中的<div id="app">。因为您已经在public/index.html

中调用了它

证明断点没有中断？

1 个答案: