vue3 如何修改集合中的某一个属性。vue修改某个list对象数组中的字段值

比如我有一个对象集合，我只想修改这个集合里边某个对象的checkype属性，封装一个方法可以通过传递一个id来修改指定id对象的checkype=2。

示例代码如下：

<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. 声明集合：

   const items = ref([
     { id: 1, checkype: 0 },
     { id: 2, checkype: 0 },
     { id: 3, checkype: 0 },
   ]);

   这里使用了 ref 函数来创建一个响应式的对象集合。

2. 声明修改方法：

   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. 模板中的按钮：

   <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)
    }
}