Vue.js:如何更新对象数组？

Question

我正在尝试更新 Vue.js 中的对象数组。在尝试更新我的位置的值时，我正在努力更新数组中的对象。
当我注销对象时，我得到了这个:

console.log(this.location) // {…}

console.log(this.location.additionalProperties);  // [{…}, __ob__: Observer]

console.log(this.location.additionalProperties.integrations);  // undefined

我的 additionalProperties 对象如下所示:

"additionalProperties": [
    {
      "integrations": [
        {
           "foo": {
               "locationId": 123,
               "example": "bar",
               ...
           }
        }
      ]
    }
],

我将我的 location 作为这样的 Prop 传递:

location: {
    type: Object,
    required: true,
    default: () => ({}),
},

我知道我正确地传递了位置。我相信这是我正在努力解决的语法问题。我试图将我的 foo 对象设置为这样的:

this.location.additionalProperties.integrations.foo = {
   locationId: 456,
   example: "testing",
   somethingElse: "anotherValue"
}

使用上述内容，我将获得 cannot set foo of undefined 的一个版本。如何更新 additionalProperties 数组中的对象？
感谢您的任何建议!

Answer 1

additionalProperties 是一个数组

"additionalProperties": [
    {
      "integrations": [
        {
           "foo": {
               "locationId": 123,
               "example": "bar",
               ...
           }
        }
      ]
    }
],

this.location.additionalProperties[0].integrations.foo = ...