Vuetify中v-row不显示问题：9×9网格最后一行仅检查器可见

问题根源 #

你的代码错误地将栅格组件（v-row/v-col）嵌套在v-btn-toggle内部，而v-btn-toggle默认是横向排列的按钮组容器，这种不符合规范的嵌套会导致容器高度计算异常，最终让最后一行按钮被溢出隐藏（DOM结构存在但视觉不可见）。

修正方案 #

方案1：纯栅格布局（无需v-btn-toggle）

如果不需要按钮组的切换功能，直接用Vuetify标准栅格系统实现3行3列布局：

<!-- Directions.vue -->
<v-container>
  <v-row>
    <v-col>
      <v-btn icon="mdi-arrow-top-left-bold-box-outline"></v-btn>
    </v-col>
    <v-col>
      <v-btn icon="mdi-arrow-up-bold-box-outline"></v-btn>
    </v-col>
    <v-col>
      <v-btn icon="mdi-arrow-top-right-bold-box-outline"></v-btn>
    </v-col>
  </v-row>
  <v-row>
    <v-col>
      <v-btn icon="mdi-arrow-left-bold-box-outline"></v-btn>
    </v-col>
    <v-col>
      <v-btn icon=""></v-btn>
    </v-col>
    <v-col>
      <v-btn icon="mdi-arrow-right-bold-box-outline"></v-btn>
    </v-col>
  </v-row>
  <v-row>
    <v-col>
      <v-btn icon="mdi-arrow-top-left-bold-box-outline"></v-btn>
    </v-col>
    <v-col>
      <v-btn icon="mdi-arrow-up-bold-box-outline"></v-btn>
    </v-col>
    <v-col>
      <v-btn icon="mdi-arrow-top-right-bold-box-outline"></v-btn>
    </v-col>
  </v-row>
</v-container>

方案2：正确使用v-btn-toggle实现切换组

如果需要按钮组的单选/多选切换功能，通过配置v-btn-toggle的布局属性实现3行3列：

<!-- Directions.vue -->
<v-btn-toggle
  column
  class="d-flex flex-wrap"
  style="max-width: 120px;"
>
  <v-btn icon="mdi-arrow-top-left-bold-box-outline"></v-btn>
  <v-btn icon="mdi-arrow-up-bold-box-outline"></v-btn>
  <v-btn icon="mdi-arrow-top-right-bold-box-outline"></v-btn>
  <v-btn icon="mdi-arrow-left-bold-box-outline"></v-btn>
  <v-btn icon=""></v-btn>
  <v-btn icon="mdi-arrow-right-bold-box-outline"></v-btn>
  <v-btn icon="mdi-arrow-top-left-bold-box-outline"></v-btn>
  <v-btn icon="mdi-arrow-up-bold-box-outline"></v-btn>
  <v-btn icon="mdi-arrow-top-right-bold-box-outline"></v-btn>
</v-btn-toggle>

• column属性让按钮组优先垂直排列，配合flex-wrap实现自动换行
• 设置max-width控制每行固定显示3个按钮

关键说明 #

• v-btn-toggle的核心作用是实现按钮组的状态切换，并非通用布局容器，不要随意嵌套栅格组件
• Vuetify栅格系统需遵循v-container→v-row→v-col的层级结构，确保布局计算逻辑正确

内容的提问来源于stack exchange，提问作者Miguel