Vuetify：根据传入Props计算网格宽度，构建等宽按钮菜单组件

嘿，我完全懂你遇到的困扰——想要根据传入的menuItems数量自动生成等宽的v-flex按钮，比如2个用xs6、3个用xs4，但直接在模板里写<v-flex xs[12 / menuItems.length]>这种语法肯定行不通对吧？

其实核心是要用Vue的动态属性绑定来实现，下面给你两种可行的方案：

方案一：模板内直接计算 #

直接在模板里通过动态属性语法拼接出对应的栅格类，代码很简洁：

<v-flex 
  v-for="(item, index) in menuItems" 
  :key="index"
  :[`xs${12 / menuItems.length}`]
>
  {{ item.label }}
</v-flex>

关键说明： #

• :[xs${12 / menuItems.length}] 是Vue的动态属性写法：先计算12 / menuItems.length得到栅格数值，再拼接成xs6、xs4这类Vuetify支持的属性名，最终渲染成对应的栅格样式。
• 别忘给v-for加上:key，这是Vue列表渲染的必填项，避免渲染异常。

方案二：用computed属性封装逻辑（更易维护） #

如果菜单数量的计算逻辑需要扩展（比如处理非12约数的情况），把逻辑放到computed里会更清晰：

<template>
  <v-flex 
    v-for="(item, index) in menuItems" 
    :key="index"
    :[gridClass]
  >
    {{ item.label }}
  </v-flex>
</template>

<script>
export default {
  props: ['menuItems'],
  computed: {
    gridClass() {
      // 处理非12约数的情况，比如取整或设置默认值
      const gridWidth = Math.floor(12 / this.menuItems.length) || 12;
      return `xs${gridWidth}`;
    }
  }
}
</script>

额外提示： #

Vuetify的栅格系统只支持1-12的整数宽度，所以如果menuItems.length不是12的约数（比如5个），直接计算会得到小数，这时候可以用Math.floor()取整，或者根据需求调整默认值，避免无效的栅格类。

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