多维对象中的深度嵌套数据对象

Question

我有一个多维对象并使用 Vue，我试图使内部对象具有反应性。

我的对象是这样的：

data() {
   return {
       myObject: {}
   }
}

填充的数据如下所示：

myObject: {
   1: {         // (client)
     0: "X",    // (index) : (value)
     1: "Y"
   },
   2: {
     0: "A",
     2: "B"
   }
}

如果我尝试使用：

let value = "X";
let client = 1;
let index = 1;

let obj = {};
obj[client][index] = value;
this.myObject = Object.assign({}, this.myObject, obj);

它抛出一个错误：

TypeError: Cannot set property '0' of undefined

如果我在下面尝试，它会覆盖初始值，因为它最初将对象设置为 {}

let obj = {};
obj[index] = value;
let parentObj = {};
parentObj[client] = obj;
this.myObject = Object.assign({}, this.myObject, parentObj);

将值添加到多维对象的正确方法是什么？

Answer 1

在 javascript 中，dim2Thing[1][1] = ... 表达式需要 dim2Thing[1] 存在。这就是你得到你提到的错误的原因。所以你可以做两个表达式，应该可以正常工作：

dim2Thing[1] = dim2Thing[1] || {} dim2Thing[1][1] = otherThing

对于最后一个区块，你提到它 "overwrites the initial values"

我认为这里实际发生的只是 Object.assign 不是递归的。它只合并顶级键。所以如果 parentObj 有一个键与 this.myObj 重叠，那么子键将丢失。

Object.assign({ a: { b: 2} }, { a: { c: 3 } }) // returns { a: { c: 3 }  }

这就是我对您的代码所做的解释 - 虽然我目前不熟悉 vue.js，所以我不能保证它会为您的网页带来预期的结果：

let value = "X";
let client = 1;
let index = 1;

const newObj = Object.assign({}, this.myObject);
// if you have lodash _.set is handy
newObj[client] = newObj[client] || {}; // whatever was there, or a new object
newObj[client][index] = value
this.myObject = newObj

Answer 2

只需使用一个数组，这在设计上是反应式的。如果您需要从模板或任何地方的数组中获取元素，只需添加一个查找方法

// 温度

late
<div v-for="(value, idx) in myArray">{{find(obj => obj.id === idx)}}</div>

methods: {
  find (searchFunction) {
    return this.myArray.find(searchFunction)  
  }
}

多维对象中的深度嵌套数据对象

Deeply nested data objects in multidimensional object

object

vue.js

vuejs2

vue-reactivity