当前位置: 首页 > 知识库问答 >
问题:

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

姚伟
2023-10-10

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

  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>

共有3个答案

慎峻
2023-10-10
list.value = Array.from(new Array(Math.ceil(list.value.length / 6)), (x, i) => list.value.slice(i * 6, (i + 1) * 6))
倪灿
2023-10-10

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

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

}

琴元凯
2023-10-10
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;
 类似资料:
  • 在vue3框架中,我使用ref定义了一个变量,但是发现在更新其数据之后,页面上并不会有响应式变化,具体表现是在更新数据之后不会出现表格最前面的选择框 数据定义 数据初始化,其中list是一个数组,具有唯一的id属性 组件A中定义了计算属性rowSelection 当点击一个按钮之后,触发BatchEdit函数,通过emit抛出新的rowSelection 在父组件中进行事件定义并更新内容 rowS

  • 以下是我的一个demo,想问问还有没有大神有其他实现方案 我这个对象是一个数组遍历的item的对象 这个对象里的pinpai1没有响应式,该怎么做?

  • 我需要在执行modal.value.layout = 'inline'后 使得formOptions.value.formProps.layout同步修改, 但是在以上↑↑↑↑↑↑↑所示的代码中无法实现 目前的方案只得按如下↓↓↓↓↓所示代码实现 我的问题是:有没有更好的实现方案,在不单独定义一个layout属性的情况下实现我的需求?

  • 问题内容: 我有一些具有相同值的数组,如下所示。 如果值重复,则将相同的总和相加。对于相同的不同,无需求和。 这就是我想要的。 我陷入上述问题。我已经尽力了。但是我得到了错误的结果。我非常感谢任何建议。 问题答案: @Cloud我已根据您的要求提供了功能,感谢@MI对此总和部分进行了研究。

  • 问题内容: 我正在尝试并行运行功能数组,当每个人都完成时,我想要处理该结果。我正在使用诺言。现在,我可以将所有函数放在一个数组中,并可以执行Promise.all(函数数组),但是我有一个像 每个承诺都是承诺的功能。Promise参考文档说Promise.all中的参数应该是一个可迭代的对象,而我的数组是可迭代的。但这对我不起作用。我认为它正在执行[promise1,promise2]作为一个承诺

  • 问题内容: 该问题旨在作为有关PHP中数组排序问题的参考。容易想到您的特定案例是独特的,值得提出新的问题,但是实际上大多数都是此页面上一种解决方案的细微变化。 如果您的问题作为该问题的重复而被关闭,请仅在您可以解释为什么该问题与以下所有内容明显不同时才要求重新提出您的问题。 如何在PHP中对数组排序? 如何在PHP中对 复杂 数组进行排序? 如何在PHP中对对象数组进行排序? 有关使用PHP现有功