{ "flowSources": [ 1, 2, 3, 4, 5, 6, 7 ], "event_type": "ADD_ENTERPRISE_WECHAT_SUCCESS", "wechatCorpTags": [], "third_event": "" }, { "flowSources": [ 1, 2, 3, 4, 5, 6, 7 ], "event_type": "ADD_ENTERPRISE_WECHAT_SUCCESS", "wechatCorpTags": [], "third_event": "" } ] 循环生成 select 绑定数组中的对象,为什么其中一个 select 绑定的event_type 变化了,其他的也跟着变化了
时间: 2023-08-10 14:09:58 浏览: 51
在你提供的数据中,每个对象都包含一个名为 `event_type` 的属性,这些对象被循环生成的 select 元素绑定到了数组中的不同对象上。当一个 select 元素的值发生变化时,其他 select 元素也会跟着变化的原因是因为它们实际上引用了同一个对象。
这是因为在 JavaScript 中,当对象被赋值给另一个变量时,实际上是将对象的引用赋值给了新的变量。这意味着所有引用同一个对象的变量都会反映对象的任何更改。
要解决这个问题,你可以为每个 select 元素创建一个独立的副本,以避免它们共享同一个对象。可以使用 `Object.assign()` 方法或者扩展运算符 `...` 来创建副本:
```javascript
data() {
return {
items: [
{ "flowSources": [ 1, 2, 3, 4, 5, 6, 7 ], "event_type": "ADD_ENTERPRISE_WECHAT_SUCCESS", "wechatCorpTags": [], "third_event": "" },
{ "flowSources": [ 1, 2, 3, 4, 5, 6, 7 ], "event_type": "ADD_ENTERPRISE_WECHAT_SUCCESS", "wechatCorpTags": [], "third_event": "" }
]
};
},
```
```html
<template>
<div>
<select v-for="(item, index) in items" :key="index" v-model="items[index].event_type">
<option value="ADD_ENTERPRISE_WECHAT_SUCCESS">ADD_ENTERPRISE_WECHAT_SUCCESS</option>
<option value="OTHER_EVENT_TYPE">OTHER_EVENT_TYPE</option>
</select>
</div>
</template>
```
在这个例子中,我们在数据中创建了独立的对象副本,每个 select 元素绑定的是不同的对象副本中的 `event_type` 属性。这样,当一个 select 元素的值发生变化时,其他 select 元素就不会跟着变化了。
希望这个解释能帮助到你!如果你还有其他问题,请随时提问。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)