1、将列表和列表项组件化，使用filter来声明式的定义待办清单和完成清单 2、将输入框组件化，通过事件将数据提交给父组件，实现追加代办项到待办清单中。 3、可以考虑使用element-plus组件库来美化应用。 现在有InputInput.vue 根据上述要求完成修改现在的代码

要将列表和列表项组件化，并结合Vue.js和filter功能来实现待办事项和已完成事项的功能，我们可以创建两个组件：`TaskItem.vue` 和 `TodoList.vue`。这里是一个简化的示例，假设`TodoList.vue`已经有一个input用于添加新任务：

**TodoList.vue**

<template>
  <div class="todo-app">
    <h2>待办事项</h2>
    <el-input v-model="newTask" placeholder="请输入待办事项"></el-input>
    <button @click="addTask">添加</button>
    <ul>
      <li v-for="(task, index) in filteredTodos" :key="index">
        <TaskItem :task="task" :completed="task.completed" @toggleCompleted="toggleCompleted(index)">
      </li>
    </ul>
    <h2>已完成事项</h2>
    <ul>
      <li v-for="(task, index) in completedTodos" :key="index">
        <TaskItem :task="task" :completed="true" @toggleCompleted="toggleCompleted(index)" disabled>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import TaskItem from '@/components/TaskItem.vue'

const newTask = ref('');
const todos = ref([]);

// 使用filter方法过滤待办和已完成任务
const filteredTodos = computed(() => {
  return todos.value.filter(task => !task.completed);
});

const completedTodos = computed(() => {
  return todos.value.filter(task => task.completed);
});

const addTask = () => {
  todos.value.push({ text: newTask.value, completed: false });
  newTask.value = '';
};

function toggleCompleted(index) {
  const task = todos.value[index];
  task.completed = !task.completed;
}

onMounted(() => {
  // 假设你有一个初始任务数组
  todos.value = [
    { text: '学习Vue', completed: false },
    { text: '设计UI', completed: true }
  ];
});
</script>

<style scoped>
/* ... (自定义样式) */
</style>

**TaskItem.vue**

<template>
  <li>
    <input type="checkbox" :checked="task.completed" @change="toggleCompleted" />
    <span @click="$emit('toggleCompleted')">{{ task.text }}</span>
  </li>
</template>

<script>
export default {
  props: {
    task: {
      type: Object,
      required: true,
    },
    completed: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    toggleCompleted() {
      this.$emit('toggleCompleted', this.task);
    },
  },
};
</script>

在这个例子中，`TodoList.vue`是主要界面，包含输入框和两个用`v-for`循环渲染的任务列表（一个显示待办事项，另一个显示已完成事项）。每个`TaskItem.vue`实例都有自己的状态，如完成状态，当勾选或取消勾选时会触发`@toggleCompleted`事件。

**相关问题--:**
1. 如何在Vue中使用计算属性filter任务？
2. 在Vue中如何处理父子组件之间的通信？
3. Element Plus组件库提供了哪些常用组件？