Vue完成一个可折叠的待办事项列表应用，使用组件实现

在Vue中实现一个可折叠的待办事项列表应用，可以使用自定义组件和一些基础组件。这里是一个简单的例子：

1. **创建基本组件**：
- 创建一个名为`TodoItem.vue`的组件，展示单个待办事项，包括文本、折叠图标和展开/折叠功能。
- `TodoItem.vue`示例：

   <template>
     <div class="todo-item">
       <input type="text" v-model="task" placeholder="Enter task" />
       <button @click="toggleCollapse">{{ isCollapsed ? 'Expand' : 'Collapse' }}</button>
       <transition name="fade">
         <p v-if="isCollapsed">{{ task }}</p>
       </transition>
     </div>
   </template>

   <script>
   export default {
     data() {
       return {
         task: '',
         isCollapsed: true,
       };
     },
     methods: {
       toggleCollapse() {
         this.isCollapsed = !this.isCollapsed;
       },
     },
   };
   </script>
   <!-- 添加必要的CSS样式，如.fade transition效果 -->

2. **创建列表组件**：
- `TodoList.vue`组件，负责渲染`TodoItem`并控制整个列表的折叠状态。

   <template>
     <div>
       <button @click="toggleAllCollapses">Toggle All</button>
       <ul>
         <li v-for="(item, index) in filteredItems" :key="index">
           <TodoItem :task="item.text" :collapsed="item.collapsed" @toggle-collapse="handleToggle(index)" />
         </li>
       </ul>
     </div>
   </template>

   <script>
   import TodoItem from './TodoItem.vue';
   
   export default {
     components: { TodoItem },
     data() {
       return {
         todos: [
           { text: 'Task 1', collapsed: true },
           // 更多任务...
         ],
         allCollapsed: false,
       };
     },
     computed: {
       filteredItems() {
         return this.todos.map((item, index) => ({
           ...item,
           collapsed: this.allCollapsed || item.collapsed,
         }));
       },
     },
     methods: {
       toggleAllCollapses() {
         this.allCollapsed = !this.allCollapsed;
         this.todos.forEach(item => (item.collapsed = this.allCollapsed));
       },
       handleToggle(index) {
         this.todos[index].collapsed = !this.todos[index].collapsed;
       },
     },
   };
   </script>

在这个例子中，`TodoList`组件维护了一个`todos`数组，每个待办事项都有一个`collapsed`属性。`TodoItem`组件根据其父组件提供的状态显示或隐藏内容。