需求
Vue3 中如何遍历list并修改list元素的属性的值?
解决办法
1、使用 map 方法
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 对象的所有属性展开为新对象的属性。
2、使用 forEach()方法
使用 forEach()函数 直接修改原数组。在 Vue 中,forEach() 是 JavaScript 数组的原生方法,用于遍历数组元素并执行回调函数,但不会返回新数组。
list.value.forEach(item => {item.oid=null;//将list元素的oid属性设置为null
});
基础语法:
array.forEach((item, index, arr) => {// 操作逻辑
})
参数说明:
item:当前遍历的元素
index(可选):当前元素的索引
arr(可选):原数组本身