如何对vue3 里响应式数组 ref([]) 的数据进行重构赋值?

如题,将[{},{},{}] 转换为[[{},{},{}],[{},{},{}]]

  let list = ref([
            {
              number: "001",
            },
            {
              number: "002",
            },
            {
              number: "003",
            },
            {
              number: "004",
            },
            {
              number: "005",
            },
            {
              number: "006",
            },
            {
              number: "007",
            },
            {
              number: "008",
            },
            {
              number: "009",
            },
            {
              number: "010",
            },
            {
              number: "011",
            },
            {
              number: "012",
            },
            {
              number: "013",
            },
            {
              number: "014",
            },
            {
              number: "015",
            },
            {
              number: "016",
            },
            {
              number: "017",
            },
            {
              number: "018",
            }
          ]);

转换为:

  let list = ref([
           [ {
              number: "001",
            },
            {
              number: "002",
            },
            {
              number: "003",
            },
            {
              number: "004",
            },
            {
              number: "005",
            },
            {
              number: "006",
            }],
            [{
              number: "007",
            },
            {
              number: "008",
            },
            {
              number: "009",
            },
            {
              number: "010",
            },
            {
              number: "011",
            },
            {
              number: "012",
            }],
           [{
              number: "013",
            },
            {
              number: "014",
            },
            {
              number: "015",
            },
            {
              number: "016",
            },
            {
              number: "017",
            },
            {
              number: "018",
            }]
          ]);
  <div class="paper"
          :class="paperHorizon?'wrapper-h':'wrapper-v'"
          v-for="(item,index) in list.value"
          :key="index"
        >
      <template v-for="(item2,index2) in item" :key="index2">
          <horizontal-card :number="item2.number"></horizontal-card>
      </template>
  </div>
阅读 1.6k
3 个回答
import { ref } from "vue";

let list = ref([
  { number: "001" },
  // ... 更多的数据
]);

let tempList = [];
const chunkSize = 6;
for (let i = 0; i < list.value.length; i += chunkSize) {
  tempList.push(list.value.slice(i, i + chunkSize));
}
list.value = tempList;

//定义个函数处理
function sendGroup(arry) {

let result = []
for (var i = 0; i < arry.length; i += 6) {
    result.push(arry.slice(i, i + 6));
}
return result

}

list.value = Array.from(new Array(Math.ceil(list.value.length / 6)), (x, i) => list.value.slice(i * 6, (i + 1) * 6))
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏