Пишу сюда, потому что не могу найти ответ, или, лучше сказать, не могу правильно сформулировать вопрос, чтобы найти его. Мой вопрос:
Учитывая структуру App.vue: (упрощенно)
<v-main>
<v-container fluid fill-height>
<router-view />
</v-container>
</v-main>
и структура Component.vue:
<v-row>
<v-col>
Component Content
</v-col>
</v-row>
Почему визуализированный компонент обернут простым <v-container>
?:
<main class = "v-main" style = "padding: 64px 0px 0px;">
<div class = "v-main__wrap">
<div class = "container container--fluid fill-height"> // App.vue
<div class = "container"> // ????
<div class = "row"> // component code
<div class = "col">
Это какой-то секретный vue-router
или vuetify
шаблон?
Может ли кто-нибудь объяснить, почему это происходит и есть ли способ избежать этого?
Редактировать: версии:
Dependencies:
req: inst:
core-js ^3.8.3 3.21.1
vue ^2.6.14 2.6.14
vue-router ^3.5.1 3.5.3
vuetify ^2.6.0 2.6.4
vuex ^3.6.2 3.6.2
Dev dependencies:
req: inst:
@babel/core ^7.12.16 7.17.7
@babel/eslint-parser ^7.12.16 7.17.0
@vue/cli-plugin-babel ~5.0.0 5.0.3
@vue/cli-plugin-eslint ~5.0.0 5.0.3
@vue/cli-plugin-router ~5.0.0 5.0.3
@vue/cli-plugin-vuex ~5.0.0 5.0.3
@vue/cli-service ~5.0.0 5.0.3
eslint ^7.32.0 7.32.0
eslint-plugin-vue ^8.0.3 8.5.0
sass ~1.32.0 1.32.13
sass-loader ^10.0.0 10.2.1
vue-cli-plugin-vuetify ^2.4.7 2.4.7
vue-template-compiler ^2.6.14 2.6.14
vuetify-loader ^1.7.0 1.7.3
Я использую 2.6.4, спасибо за песочницу, правда там этого нет. Также содержимое плагина vuetify немного отличается от того, что было в моем проекте (установлено вместе с vue ui).
Хорошо, плохо, я не понял, что это произошло потому, что родительский компонент этого конкретного подпредставления <v-container>
не был помечен как гибкий.
Теперь все исправлено. Так как родитель был всего лишь шаблоном с контейнером и router-view без всякой логики, я про него совсем забыл.
Какую версию vuetify вы используете? Не удается воспроизвести проблему. Проверьте этот codesanbox, который я сделал: codeandbox.io/s/…