多维数组 Vue 2 中的奇怪行为答案

【问题标题】：Weird Behaviour in Multidimensional Array Vue 2多维数组 Vue 2 中的奇怪行为
【发布时间】：2023-03-27 19:29:02
【问题描述】：

我有一个数据，例如：

{
   "carts":[
      {
         "id":791,
         "name":"CAPE DISCOVERY SHIRAZ",
         "image":"http://example.com/foo.png",
         "price":20000,
         "additionals":[
            [
               {
                  "id":792,
                  "name":"Extra Cheese",
                  "price":20000,
                  "count":0,
                  "stock":80
               },
               {
                  "id":790,
                  "name":"Extra Beef",
                  "price":30000,
                  "count":0,
                  "stock":16
               },
               {
                  "id":788,
                  "name":"Extra Mayonnaise",
                  "price":50000,
                  "count":4,
                  "stock":34
               }
            ],
            [
               {
                  "id":792,
                  "name":"Extra Cheese",
                  "price":20000,
                  "count":0,
                  "stock":80
               },
               {
                  "id":790,
                  "name":"Extra Beef",
                  "price":30000,
                  "count":0,
                  "stock":16
               },
               {
                  "id":788,
                  "name":"Extra Mayonnaise",
                  "price":50000,
                  "count":4,
                  "stock":34
               }
            ]
         ],
         "count":2
      }
   ]
}

当我尝试循环additionals 的数组以通过其id 增加/减少count 属性时，结果是所有具有相同id 的count 属性也受到影响。

这是我用来递增和递减的一种方法

//Get the last additional of an item then get the correspond additional and increment its count
addAdditional(event, productId, additionalId) {
  let data = this.carts.filter((e) => e.id == productId)[0]?.additionals
  data[data.length - 1].filter(e => e.id == additionalId)[0].count++
  return;
},
//Get the last additional of an item then get the correspond additional and decrement its count
removeAdditional(event, productId, additionalId) {
  let data = this.carts.filter((e) => e.id == productId)[0]?.additionals
  data[data.length - 1].filter((e) => {
    if (e.id == additionalId && e.count > 0) {
      e.count--;
    }
    return e;
  });
},

我将进一步解释： productId 指的是键值 791，附加 ID 指的是 additionals 属性内的 id。 count 属性指的是它尝试购买的商品数量。 count 与 additionals 的数量同步。

如果我将 count 的 Extra Cheese 的值增加 5，那么奇怪的东西，数组中的第二项 (Extra Cheese) 也更新为值 5。

另外，当我使用 Vue Devtools 手动更改值时会发生这种情况。

【问题讨论】：

您想一次只更改一个值吗？在这种情况下，您必须提供该数组中该特定项目的索引。另外请使用 Vue.set api 设置/取消设置数组/对象中的值，以便 vue 重新渲染列表。
是的，我想一次更改一个值。我还没有提供索引吗？在我看来，我已经做到了。好的，将阅读并尝试t，感谢您的帮助

标签： javascript vue.js ecmascript-6 vuejs2

【解决方案1】：

由于这是多维数组，最好使用索引来更新特定元素。此外，在您的情况下，您在多个元素的附加数组中具有相同的 id。因此，要选择其中一个进行更新，您不能使用id，因为它们不是唯一的，除非您将 id 与其在该数组中的位置索引结合起来。希望这是有道理的。

var app = new Vue({
  el: '#vue-app',
  methods : {
    changeCountByIndex(cartItemIndex , addParentIndex , itemIndex , type)
    {

       let current_value = this.carts[cartItemIndex].additionals[addParentIndex][itemIndex].count;

       Vue.set(this.carts[cartItemIndex].additionals[addParentIndex][itemIndex] , 'count' , type=== 'add' ? ++current_value : --current_value)
    }
  },
  data: {
   "carts":[
      {
         "id":791,
         "name":"CAPE DISCOVERY SHIRAZ",
         "image":"http://example.com/foo.png",
         "price":20000,
         "additionals":[
            [
               {
                  "id":792,
                  "name":"Extra Cheese",
                  "price":20000,
                  "count":0,
                  "stock":80
               },
               {
                  "id":790,
                  "name":"Extra Beef",
                  "price":30000,
                  "count":0,
                  "stock":16
               },
               {
                  "id":788,
                  "name":"Extra Mayonnaise",
                  "price":50000,
                  "count":4,
                  "stock":34
               }
            ],
            [
               {
                  "id":792,
                  "name":"Extra Cheese",
                  "price":20000,
                  "count":0,
                  "stock":80
               },
               {
                  "id":790,
                  "name":"Extra Beef",
                  "price":30000,
                  "count":0,
                  "stock":16
               },
               {
                  "id":788,
                  "name":"Extra Mayonnaise",
                  "price":50000,
                  "count":4,
                  "stock":34
               }
            ]
         ],
         "count":2
      }
   ]

  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>


<div id="vue-app">
    <div :key="item.id" v-for="(item, cartItemIndex) in carts">
      <strong>
        {{ item.name }}
      </strong>
      
      additionals 
      <div :key="'a' + addParentIndex" v-for="(addItem , addParentIndex) in item.additionals">
      
          <div :key="extra.id" v-for="(extra , itemIndex) in addItem">
              {{ extra.name }} {{extra.count}}  <button @click="changeCountByIndex(cartItemIndex ,addParentIndex , itemIndex , 'add')">+</button> <button @click="changeCountByIndex(cartItemIndex ,addParentIndex , itemIndex , 'decrease')">-</button>
          </div>
      
      </div>
    </div>
</div>

【讨论】：