Vue3 + Tailwind CSS 重复动态网格布局实现问题求助

你这代码的问题出在模板里调用了updateCounter这个会修改响应式状态的函数，每次渲染都会触发状态变化，导致组件无限重渲染、状态混乱，最终布局完全不符合预期。而且原有的条件判断也没把重复布局的逻辑理清楚。

解决办法很简单：先明确你要的重复布局单元，比如假设你要的是每8个元素为一组，前6个在md及以上屏幕占4列，最后2个占6列（刚好填满每行12列），直接根据元素索引计算对应的列跨度类就行，不用修改响应式状态。重构后的代码如下：

<template>
  <div class="min-h-screen flex items-center bg-purple-500">
    <div class="flex-1 max-w-4xl mx-auto p-8">
      <ul class="grid grid-cols-12 gap-8">
        <!-- 这里的16可以改成你需要的总元素数，比如24就是三组 -->
        <li
          v-for="(_, index) in 16"
          :key="index"
          :class="[
            'bg-white rounded-lg shadow-xl',
            'col-span-12 sm:col-span-6',
            index % 8 < 6 ? 'md:col-span-4' : 'md:col-span-6'
          ]"
        >
          <div class="h-24">{{ index }}</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
// 不需要额外的响应式状态和修改函数
</script>

逻辑说明： #

• 用index % 8拿到元素在重复单元里的位置（0到7）
• 位置在0-5（前6个元素）时用md:col-span-4，每3个刚好占满一行（3×4=12列），6个元素就是两行
• 位置在6-7（最后2个元素）时用md:col-span-6，两个元素刚好占满一行（2×6=12列）
• 全程没修改响应式状态，不会出现渲染混乱，逻辑也一目了然

要是你想要的重复模式不一样（比如单元里的元素数量、列跨度不同），只需要调整index % N里的N（单元总元素数），再修改对应的条件判断就行。

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