JavaScript在数组中查找并替换一个值

我正在努力编写一些简单的javascript代码。 我有一些用Vue制作的电子商务项目，我想在客户端选择变体。因此，我以这种格式将数据发送到后端：

{
    "options": [
        {
            "key": "Size",
            "value": "L"
        },
        {
            "key": "Color",
            "value": "Green"
        }
    ]
}

后端将返回所选选项的价格，并从链接获取产品的id。所以我在我的前端做了一个push-to-array，如下所示：

getVariationPrice(id, attr, value){
            this.variation.options.push({
                    key: attr,
                    value: value
        });

id是URL中的产品id

所以我列出了该产品的属性，如下所示：

 <span v-for="(attributes, index) in product.attributes" :key="index">
         {{ attributes.key }}
    <v-chip-group active-class="deep-purple accent-4 white--text" column>
       <span v-for="(values, vIndex) in attributes.values" :key="vIndex">
         <v-chip  @click="getVariationPrice(product.id, attributes.key, values)">{{ values }}</v-chip>
       </span>
    </v-chip-group>
  </span>

{{attributes.key}
{{values}}

如您所见，我在其中有getVariationPrice函数。 所以问题是，如何使这些值可替换？因为每次我选择一个新值时，它都会推送到数组并将不正确的数据发送到后端

---

PS：请记住，后端可以返回不同的属性，不仅是大小和颜色，而且它将检查每个给定值并搜索该产品，它必须只返回选定的键和值。

我认为您可以在vuetify中支持的

v-model

中使用

v-chip-group

<v-chip-group v-model="attributes.values" multiple></v-chip-group>

并为每个芯片赋值

单击鼠标时不需要调用函数<代码>v型自动处理

属性。值

---

希望这是有帮助的

传递索引，更新

product.attributes[index].values[vIndex]

insteadThank，但它不能像我需要的那样工作：）