javascript - Vue 3：在不破坏反应性的情况下展平反应性对象数组

Question

当我尝试扁平化嵌套对象的 Vue 3 反应性数组时，我失去了它们的反应性，我的应用程序实际上崩溃并挂起浏览器窗口。

我的 Vue 3 组件将数组定义为对象列表：

this.grouped = [
          [this.tokens[0]],
          [this.tokens[1]],
          [this.tokens[2],this.tokens[3],this.tokens[4]], // nested
          [this.tokens[5]]
]

我需要获取第二个索引（数组嵌套 3 个对象的位置）并将其展平，以便生成的数组看起来像这样定义：

this.grouped = [
          [this.tokens[0]],
          [this.tokens[1]],
          [this.tokens[2]], //flattened
          [this.tokens[3]], //flattened
          [this.tokens[4]], //flattened
          [this.tokens[5]]
]

当我尝试使用它splice来执行此操作时，反应性会丢失（下面的示例，显示了失去的反应性。有什么想法吗？

标签： javascriptvue.js

Answer 1

尝试Array#flat：

const res = this.grouped.flat();