Vue3实战小技巧(findIndex) 查找data数组做单一修改

近期做项目遇到确认框选择后无法刷新ui按钮问题，因为确认框不在for的item元素里面，无法重新赋值，所以自能通过使用findIndex遍历当前页面数据；也就是data.value使用id作为条件查找元素，重新赋值符合id的state元素从而达到state按钮刷新效果。这里仅作为知识点分享，代码如下：

<Button type="primary" @click="showConfirmModal(item)" class="ml-2" > {{ item.state }}
          <Modal v-model:open="confirmModalVisible" :mask="false" title="该片单审核是否通过？">
          <template #footer>
                  <Button @click="handleConfirmNo()">否</Button>
                   <Button type="primary" @click="handleConfirmYes()">是</Button>
           </template>
          </Modal>
</Button>



const confirmModalVisible = ref(false);

// 显示确认框
const showConfirmModal = async (item) => {
  if (item.state === "待审核") {
    id.value = item.id;
    confirmModalVisible.value = true;
  } else {
    message.warning("该条目已审核！")

  }

};

// 处理点击“是”的逻辑
const handleConfirmYes = async () =>  {

  confirmModalVisible.value = false;
   const { data: res } = await axios.post(`http://localhost:9002/user-slice/id?id=${id.value}&state=1`);

 item.state= "审核成功" //无法赋值
state.value="审核成功" //ui未使用


    // 更新 data 数组中对应项的状态，条件id===id
    const index = data.value.findIndex(item => item.id === id.value);
    if (index!== -1) {
      data.value[index].state = "审核成功";
    }
  

    if(res.data){
   return   message.success('审核通过');
    }
return message.error("操作失败")


};

// 处理点击“否”的逻辑
const handleConfirmNo = async () => {
  confirmModalVisible.value = false;
   const { data: res } = await axios.post(`http://localhost:9002/user-slice/id?id=${id.value}&state=2`);
 item.state= "审核失败" //无法赋值
state.value="审核失败" //ui未使用



   // 更新 data 数组中对应项的状态
   const index = data.value.findIndex(item => item.id === id.value);
    if (index!== -1) {
      data.value[index].state = "审核失败";
    }

if(res.data){
    return  message.success('审核不予通过');
    }
return message.error("操作失败")



};