VUE js中把一个对象数组的指定属性的值更新到另一个对象数组的同一个属性上,示例
时间: 2024-12-25 09:28:22 浏览: 3
在Vue.js中,你可以通过`v-for`指令遍历对象数组,并利用`map`、`filter`或者`forEach`等方法来处理数据。如果你想将一个对象数组的某个属性(例如`sourceArray`)的值更新到另一个对象数组(`targetArray`)中对应位置的同名属性上,可以这样做:
```javascript
<template>
<div v-for="item in targetArray">
<span :value="updateValue(item, sourceArray, 'yourAttribute')"></span>
</div>
</template>
<script>
export default {
data() {
return {
sourceArray: [
{ yourAttribute: 'value1' },
{ yourAttribute: 'value2' },
// ... 其他对象
],
targetArray: [
// ... 目标对象数组
]
}
},
methods: {
updateValue(targetItem, sourceArray, attribute) {
const sourceValue = sourceArray.find(obj => obj[attribute] === targetItem.id || obj.yourKey === targetItem.key); // 根据实际情况替换id或key
if (sourceValue) {
targetItem.yourAttribute = sourceValue.yourAttribute; // 更新目标对象的属性
} else {
console.log('源对象未找到');
}
}
}
}
</script>
```
在这个例子中,我们假设`targetArray`中的每个元素都有一个`id`或`key`字段,可以根据这个字段从`sourceArray`中查找相应的值。然后,我们将找到的值赋给`targetItem`的`yourAttribute`。
阅读全文