VUE 把一个对象数组的指定属性的值更新到另一个对象数组的同一个属性上,示例
时间: 2024-12-24 15:39:48 浏览: 1
vue遍历对象中的数组取值示例
Vue.js 中可以使用 `v-for` 指令以及 `v-model` 或者 `Object.assign` 等方法来实现对象数组间的属性同步。假设我们有两个对象数组,一个是源数据 (`sourceData`),另一个是目标数据 (`targetData`),它们都有相同的结构,比如都包含 `value` 属性:
```html
<template>
<div>
<ul>
<!-- 源数据 -->
<li v-for="item in sourceData" :key="item.id">
{{ item.value }}
<button @click="updateValue(item)">更新</button>
</li>
<!-- 目标数据,初始状态 -->
<li v-for="item in targetData" :key="item.id" :value="item.value">
{{ item.value }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
sourceData: [
{ id: 1, value: '原始值1' },
{ id: 2, value: '原始值2' }
],
targetData: []
};
},
methods: {
updateValue(item) {
// 将源数据的value更新到目标数据对应位置,并保持双向绑定
this.targetData.find(targetItem => targetItem.id === item.id).value = item.value;
// 如果你想保持两数组完全同步,还可以这样做:
// Object.assign(this.targetData, { [item.id]: { ...item, value: item.value } });
}
}
};
</script>
```
在这个例子中,当你点击 "更新" 按钮时,会找到相应索引的 `targetData` 对象,然后将它的 `value` 更新为 `sourceData` 的当前项的 `value`。由于 `v-model` 或者 `:value` 创建了双向绑定,所以对 `targetData` 的修改也会实时反映在视图上。
阅读全文