Vue+PHP+JSON待办任务点击切换completed状态失效求助

问题背景 #

已实现Vue前端新增任务、PHP后端存入todo.json的功能，但点击任务文本切换completed字段状态时无法正常工作。

失效原因 #

1. 前端请求路径错误：taskDone方法里调用的是newtask.php，但实际处理状态切换的后端文件是taskdone.php，请求目标完全错误。
2. 后端数据结构被破坏：PHP代码中$todoList=$todoList[$id]["completed"] = !$todoList[$id]["completed"];这行代码会把整个任务列表数组替换成单个布尔值（切换后的completed状态），直接破坏了todo.json的数组结构。
3. 前端未刷新任务列表：即使请求成功，前端也没有调用getAll()方法重新拉取数据，界面不会同步更新状态。
4. 后端JSON解析方式错误：json_decode()默认返回对象，用数组下标$todoList[$id]["completed"]访问会报错，需要转成关联数组。

修复方案 #

前端（todo.vue）修改 #

调整taskDone方法的请求路径，并在请求成功后刷新任务列表：

<script >
import axios from 'axios';
const API_URL = "http://localhost/";
export default {
data(){
  return{
    task : "",
    todoList : []
  }
},
methods: {
  getAll(){
    axios.get(API_URL + "api.php")
    .then(res => {
      const data = res.data;
      this.todoList = data;
    })
    .catch(err => console.error('获取列表失败:', err));

  },
  addNew(e){
    e.preventDefault();
    const params = { params: {
      "newTask" : this.task
    }};
    axios.get(API_URL + "newtask.php",params)
    .then(() => {
      this.getAll();
    })
    .catch(err => console.error('新增任务失败:', err))
    this.task = "";
  },
  taskDone(i){
    const params = { params: {
      "id" : i
    }}
    // 修正请求URL为taskdone.php，并在成功后刷新列表
    axios.get(API_URL + "taskdone.php", params)
    .then(() => {
      this.getAll();
    })
    .catch(err => console.error('切换状态失败:', err))
    console.log(i);
  }
},
mounted(){
  this.getAll();
}
}
</script>

后端（taskdone.php）修改 #

修正JSON解析方式，避免破坏原数据结构，增加参数合法性校验：

<?php
header("Access-Control-Allow-Origin: http://localhost:5173");
header("Access-Control-Allow-Headers: X-Requested-With");
header("Content-Type: application/json");

// 校验id参数是否存在且为数字
if(!isset($_GET["id"]) || !is_numeric($_GET["id"])){
    http_response_code(400);
    echo json_encode(["error" => "无效的任务ID"]);
    exit;
}

$id = (int)$_GET["id"];
$jsonTodoList = file_get_contents("todo.json");
// 第二个参数设为true，将JSON解析为关联数组
$todoList = json_decode($jsonTodoList, true);

// 校验id是否在数组索引范围内
if(!isset($todoList[$id])){
    http_response_code(404);
    echo json_encode(["error" => "任务不存在"]);
    exit;
}

// 仅切换对应任务的completed状态，不覆盖整个数组
$todoList[$id]["completed"] = !$todoList[$id]["completed"];

$jsonTodoList = json_encode($todoList);
file_put_contents("todo.json", $jsonTodoList);

// 返回更新后的任务列表
echo json_encode($todoList);

额外优化建议 #

• 尽量使用POST/PUT请求处理状态变更操作，而不是GET（GET请求更适合获取数据，修改数据用POST/PUT更符合REST规范）。
• 给任务添加唯一ID（比如UUID或自增ID），而不是依赖数组索引作为ID（数组索引会在删除任务后发生变化，导致状态切换出错）。

内容的提问来源于stack exchange，提问作者g.Luke