Vue.js待办事项应用开发求助：功能实现问题咨询

问题分析 #

原代码存在以下核心问题：

• 任务仅存储字符串，无状态标记，无法区分完成/未完成状态
• v-model绑定的输入变量未在data中声明，导致输入无法正常绑定
• 模板插值变量名错误，任务内容无法显示
• 完成任务的逻辑错误，无法精准处理指定任务的状态变更
• 列表显示逻辑不符合需求，未按任务状态过滤内容

修正后的完整代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <script src="lib/js/vue.js"></script>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>待办事项列表</title>
</head>
<body>
  <div id="todoapp">
    <h1>TO-DO</h1>
    <p>
      <label for="newtask">添加新任务</label>
      <input id="newtask" type="text" v-model="newTaskText" placeholder="输入任务内容" />
      <button class="hinzu" v-on:click="addTask">添加</button>
    </p>

    <h1>所有任务</h1>
    <ul>
      <li v-for="task in incompleteTasks" :key="task.id">
        {{task.text}}<br />
        <button class="task-btn" v-on:click="markAsIncomplete(task)">未完成！</button>
        <button class="task-btn" v-on:click="markAsCompleted(task)">已完成！</button>
      </li>
    </ul>

    <h2>未完成任务</h2>
    <ul>
      <li v-for="task in incompleteTasks" :key="task.id">
        {{task.text}}<br />
        <button class="task-btn" v-on:click="markAsCompleted(task)">已完成！</button>
      </li>
    </ul>

    <h2>已完成任务</h2>
    <ul>
      <li v-for="task in completedTasks" :key="task.id">
        {{task.text}}<br />
        <button class="task-btn" v-on:click="markAsIncomplete(task)">未完成！</button>
      </li>
    </ul>
  </div>

  <script>
    var app = new Vue({
      el: "#todoapp",
      data() {
        return {
          newTaskText: "",
          tasks: [],
          taskIdCounter: 1
        };
      },
      computed: {
        incompleteTasks() {
          return this.tasks.filter(task => !task.completed);
        },
        completedTasks() {
          return this.tasks.filter(task => task.completed);
        }
      },
      methods: {
        addTask() {
          if (!this.newTaskText.trim()) return;
          this.tasks.push({
            id: this.taskIdCounter++,
            text: this.newTaskText.trim(),
            completed: false
          });
          this.newTaskText = "";
        },
        markAsCompleted(task) {
          task.completed = true;
        },
        markAsIncomplete(task) {
          task.completed = false;
        }
      }
    });
  </script>
</body>
</html>

关键修改说明 #

• 数据结构优化：将任务改为对象结构，包含id（唯一标识，避免渲染冲突）、text（任务内容）、completed（完成状态），便于状态管理
• 计算属性过滤：通过incompleteTasks和completedTasks自动过滤不同状态的任务，无需手动维护多个数组，逻辑更简洁
• 输入绑定修复：在data中声明newTaskText绑定输入框，添加任务后自动清空输入框，避免重复添加
• 模板变量修正：使用{{task.text}}正确显示任务内容，循环时添加:key="task.id"符合Vue渲染规范
• 按钮逻辑调整：
  • 「所有任务」列表显示未完成任务，保留双按钮符合需求
  • 「未完成任务」列表仅显示“已完成！”按钮，匹配需求要求
  • 「已完成任务」列表显示完成任务，提供状态回滚按钮
• 防空处理：添加任务时判断输入内容，避免添加空白任务

内容的提问来源于stack exchange，提问作者silence1979g