开发避坑指南(27)：Vue3中高效安全修改列表元素属性的方法

帧栈2025-08-16 22:42

需求

Vue3 中如何遍历list并修改list元素的属性的值？

vue 复制代码

const newList = list.value.map(item => {
  return {
    ...item,
    modifiedProperty: 'newValue' // 修改的属性名称和属性值
  }
})

Vue 中的 map() 函数是 JavaScript 数组的高阶函数，主要用于遍历数组并返回新数组，常用于数据处理和响应式更新。

特点‌：不修改原数组，返回处理后的新数组。

典型场景‌：转换数据格式、修改元素属性的值或提取特定属性。

...item 包含两个关键部分：

item‌：代表列表渲染 (v-for) 中当前遍历的元素，它是数组或对象迭代项的别名变量。

示例：v-for="item in items" 中，item 是数组 items 的单个元素可通过 item.属性名访问具体数据（如 item.id）

...（展开运算符）‌：‌作用‌是将 item 对象的所有属性展开为新对象的属性。

使用 forEach()函数直接修改原数组。在 Vue 中，forEach() 是 JavaScript 数组的原生方法，用于遍历数组元素并执行回调函数，但不会返回新数组。

vue 复制代码

list.value.forEach(item => {
	item.oid=null;//将list元素的oid属性设置为null
});

基础语法：

vue 复制代码

array.forEach((item, index, arr) => {
  // 操作逻辑
})

‌参数说明‌：

item：当前遍历的元素

index（可选）：当前元素的索引

arr（可选）：原数组本身