多维数组 Vue 2 中的奇怪行为
Posted
技术标签:
【中文标题】多维数组 Vue 2 中的奇怪行为【英文标题】：Weird Behaviour in Multidimensional Array Vue 2 【发布时间】：2021-09-15 21:24:36 【问题描述】：我有一个数据，例如：
"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，感谢您的帮助 【参考方案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>【讨论】：
以上是关于多维数组 Vue 2 中的奇怪行为的主要内容，如果未能解决你的问题，请参考以下文章