vue3 如何修改集合中的某一个属性。vue修改某个list对象数组中的字段值 电脑版发表于:2025/2/21 11:46 比如我有一个对象集合,我只想修改这个集合里边某个对象的checkype属性,封装一个方法可以通过传递一个id来修改指定id对象的checkype=2。 [TOC] ### 示例代码如下: ```vue <template> <!-- 你的模板代码 --> <div> <button @click="updateCheckype(2)">修改ID为2的对象的checkype为2</button> </div> </template> <script setup lang="ts"> import { ref } from 'vue'; // 声明一个响应式的对象集合 const items = ref([ { id: 1, checkype: 0 }, { id: 2, checkype: 0 }, { id: 3, checkype: 0 }, ]); // 声明一个方法来修改指定id对象的checkype属性 const updateCheckype = (id: number) => { items.value = items.value.map(item => { if (item.id === id) { return { ...item, checkype: 2 }; } return item; }); }; </script> ``` #### 解释: 1. **声明集合**: ```typescript const items = ref([ { id: 1, checkype: 0 }, { id: 2, checkype: 0 }, { id: 3, checkype: 0 }, ]); ``` 这里使用了 `ref` 函数来创建一个响应式的对象集合。 2. **声明修改方法**: ```typescript const updateCheckype = (id: number) => { items.value = items.value.map(item => { if (item.id === id) { return { ...item, checkype: 2 }; } return item; }); }; ``` `updateCheckype` 方法接收一个 `id` 参数,并使用 `map` 方法遍历集合。如果当前对象的 `id` 与传入的 `id` 匹配,就返回一个新的对象(使用展开运算符复制原对象,并修改 `checkype` 属性)。否则,返回原对象。 3. **模板中的按钮**: ```html <button @click="updateCheckype(2)">修改ID为2的对象的checkype为2</button> ``` 在模板中,你可以绑定一个按钮的点击事件来调用 `updateCheckype` 方法,并传递你想修改的对象的 `id`。 这样,当你点击按钮时,集合中 `id` 为 2 的对象的 `checkype` 属性就会被修改为 2。 ### 修改对象里边还有对象的情况。比如修改对象里边有个对象属性projectMembersResultDto中的checkype属性 **示例代码如下:** ``` const updateCheckype = (id: string,checkype:number) => { state.projectMembersList = state.projectMembersList.map(item => { if (item.id === id) { // 修改对象里边还有对象的情况。比如修改对象里边有个对象属性projectMembersResultDto中的checkype属性 item.projectMembersResultDto.checkype = checkype return { ...item, projectMembersResultDto: item.projectMembersResultDto }; } return item; }); }; ``` **调用:** ``` const checkSuccess = (_rowData: any) => { // 刷新修改的checktype数据 if (_rowData&&state.checkRowId) { updateCheckype(state.checkRowId,_rowData.checkype) } } ```