在vue中有条件地包裹div中的组件组

Question

我有一个具有以下结构的 ref 变量

[ { "row": 1, "column": 1 }, { "row": 1, "column": 2 }, { "row": 1, "column": 3 }, { "row": 1, "column": 4 }, { "row": 1, "column": 5 }, { "row": 1, "column": 6 }, { "row": 2, "column": 1 }, { "row": 2, "column": 2 }, { "row": 2, "column": 3 }, { "row": 2, "column": 4 }, { "row": 2, "column": 5 }, { "row": 2, "column": 6 }, { "row": 3, "column": 1 }, { "row": 3, "column": 2 }, { "row": 3, "column": 3 }, { "row": 3, "column": 4 }, { "row": 3, "column": 5 }, { "row": 3, "column": 6 }, { "row": 4, "column": 1 }, { "row": 4, "column": 2 }, { "row": 4, "column": 3 }, { "row": 4, "column": 4 }, { "row": 4, "column": 5 }, { "row": 4, "column": 6 } ]

然后我想迭代这个数组以显示一个组件，每个不同的行应该用

包裹起来

<div class="row">  </div>

这就是我目前循环组件的方式

<Box v-for="(cell, index) in grid" :key="index"></Box>

Answer 1

您可以对行进行分组：

VUE SFC 游乐场

<script setup>
import { ref } from 'vue'
const grid = [ { "row": 1, "column": 1 }, { "row": 1, "column": 2 }, { "row": 1, "column": 3 }, { "row": 1, "column": 4 }, { "row": 1, "column": 5 }, { "row": 1, "column": 6 }, { "row": 2, "column": 1 }, { "row": 2, "column": 2 }, { "row": 2, "column": 3 }, { "row": 2, "column": 4 }, { "row": 2, "column": 5 }, { "row": 2, "column": 6 }, { "row": 3, "column": 1 }, { "row": 3, "column": 2 }, { "row": 3, "column": 3 }, { "row": 3, "column": 4 }, { "row": 3, "column": 5 }, { "row": 3, "column": 6 }, { "row": 4, "column": 1 }, { "row": 4, "column": 2 }, { "row": 4, "column": 3 }, { "row": 4, "column": 4 }, { "row": 4, "column": 5 }, { "row": 4, "column": 6 } ]

const msg = ref('Hello World!')
</script>

<template>
  <div class="row" v-for="(rows, index) in Object.groupBy(grid, c => c.row)" :key="index">
    <div v-for="(cell,index) in rows" :key="index">{{ cell }}</div>
  </div>
</template>

如果你对功能组件没问题，你可以做一个通用的分组控件，而且你可以直接分组虚拟节点，而不是数据。一个简单的分组控件（分组数据）：

VUE SFC 游乐场