0

我有一个多维对象并使用 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：无法设置未定义的属性“0”

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

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

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

4

2 回答 2

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
于 2018-04-14T05:33:57.617 回答
0

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

// 温度

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

methods: {
  find (searchFunction) {
    return this.myArray.find(searchFunction)  
  }
}
于 2018-04-14T10:20:24.807 回答