javascript - js处理数组数据竖向显示？

Question

let arr = [
  [{price: 26, item_name: '测试1'},{price: 269, item_name: '测试1'},{price: 546, item_name: '测试1'}]
  [{price: 75, item_name: '测试2'},{price: 360, item_name: '测试2'},{price: 648, item_name: '测试2'},{price: 914, item_name: '测试2'}]
  [{price: 142, item_name: '测试3'},{price: 456, item_name: '测试3'},{price: 685, item_name: '测试3'}]
]

在vue3中循环这个arr数组，怎么让数据竖向显示，如下图

<div v-for="i in arr" :key="i">
  <div v-for="(j, index) in i">{{j.name}}</div>
</div>

这样双循环没有达到效果，
请问循环前是不是要处理一下arr这个数据

Answer 1

<script setup>
const arr = [
  [{ price: 26, item_name: '测试1' }, { price: 269, item_name: '测试1' }, { price: 546, item_name: '测试1' }],
  [{ price: 75, item_name: '测试2' }, { price: 360, item_name: '测试2' }, { price: 648, item_name: '测试2' }, { price: 914, item_name: '测试2' }],
  [{ price: 142, item_name: '测试3' }, { price: 456, item_name: '测试3' }, { price: 685, item_name: '测试3' }]
]
</script>

<template>
  <div class="container">
    <div class="i" v-for="i of arr">
      <div class="j" v-for="j of i">
        {{ j.item_name }}
      </div>
    </div>
  </div>
</template>

<style>
.container {
  display: flex;

  >.i {
    flex: 1;

    >.j {
      margin: 5px;
      text-align: center;
      border: 1px black solid;
    }
  }
}
</style>

Vue SFC Playground

Answer 2

首先，您提供的数组 arr 并不是一个有效的 JavaScript 数组，因为它缺少了数组元素的分隔符（逗号）。正确的数组格式应该如下：

let arr = [
  [{price: 26, item_name: '测试1'}, {price: 269, item_name: '测试1'}, {price: 546, item_name: '测试1'}],
  [{price: 75, item_name: '测试2'}, {price: 360, item_name: '测试2'}, {price: 648, item_name: '测试2'}, {price: 914, item_name: '测试2'}],
  [{price: 142, item_name: '测试3'}, {price: 456, item_name: '测试3'}, {price: 685, item_name: '测试3'}]
];

接下来，关于在 Vue 3 中如何显示这个数组以使其“竖向”显示（假设您希望每个对象的属性（如 price 和 item_name）按列而不是按行显示），您需要首先明确一点：在 HTML 中，通常我们按行（使用 <div>、<p> 等标签）来组织内容，而不是按列（除非使用 CSS 的列布局）。但是，根据您提供的图片和描述，您可能想要的是按 item_name 排序并显示所有价格，这实际上是按行显示，但每行显示不同 item_name 的所有价格。

如果您的目标是这样的，那么您不需要在循环前特别处理数组 arr，但您需要调整您的模板来正确显示数据。以下是一个简单的 Vue 3 组件示例，它展示了如何实现这一点：

<template>
  <div>
    <div v-for="(group, index) in arr" :key="index">
      <h3>{{ group[0].item_name }}</h3> <!-- 假设每个组的第一个对象有代表性的 item_name -->
      <div v-for="(item, index) in group" :key="index">
        价格: {{ item.price }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        [{price: 26, item_name: '测试1'}, {price: 269, item_name: '测试1'}, {price: 546, item_name: '测试1'}],
        [{price: 75, item_name: '测试2'}, {price: 360, item_name: '测试2'}, {price: 648, item_name: '测试2'}, {price: 914, item_name: '测试2'}],
        [{price: 142, item_name: '测试3'}, {price: 456, item_name: '测试3'}, {price: 685, item_name: '测试3'}]
      ]
    };
  }
};
</script>

在这个例子中，外层循环遍历 arr 中的每个“组”（即每个包含多个对象的数组），内层循环遍历每个组中的每个对象，并显示其价格。每个组的第一个对象的 item_name 被用作该组所有价格的标题。

请注意，这种方法假设每个组内的所有对象都有相同的 item_name。如果这不是情况，您可能需要调整逻辑来更准确地反映您的数据结构和显示需求。