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：无法设置属性＆＃39; 0＆＃39;未定义的

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

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

对于最后一个块，您提到它“覆盖了初始值”

我认为这里实际发生的事情只是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

只需使用一个数组，那就是设计反应。如果您需要从模板中的数组中获取元素，或者只需添加一个find方法

// temp

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

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

在多维对象中深层嵌套数据对象

2 个答案: