Vue.js代码分析：任务清单组件优化建议

<template>
  <div class='task-list'>1111
    <h1 class='title'>任务清单</h1>
    <hr>
    <todo-input @add='addNewTask'></todo-input>
    <ul>
      <li v-for='task in filteredTaskList' :key='task.id'>
        {{ task.content }}</li>
    </ul>
    <todo-button v-model:active='activeBtnIndex'></todo-button>
  </div>
</template>
<script>
import axios from 'axios';
import TodoList from '@/components/TaskList/TodoList';
import TodoInput from '@/components/TaskList/TodoInput';
import TodoButton from '@/components/TaskList/TodoButton';
import { nextTick } from 'vue';

export default {
  name: 'TaskList',
  data() {
    return {
      taskList: [],
      nextId: 0,
      activeBtnIndex: 0
    }
  },
  created() {
    this.fetchTaskList();
  },
  computed: {
    filteredTaskList() {
      switch (this.activeBtnIndex) {
        case 1:
          return this.taskList.filter(task => task.done);
        case 2:
          return this.taskList.filter(task => !task.done);
        default:
          return this.taskList;
      }
    }
  },
  methods: {
    fetchTaskList() {
      const token = localStorage.getItem('token');
      console.log(token);
      axios.interceptors.request.use(
        config => {
          config.headers.Authorization = token;
          return config;
        },
        error => Promise.reject(error)
      );
      axios.get('http://localhost:8888/task/findAllTask')
        .then(response => {
          this.taskList = response.data.data.records;
          this.nextId = response.data.data.total;
          console.log(this.taskList);
        })
        .catch(error => {
          console.log(error);
        });
    },
    addNewTask(taskName) {
      this.taskList.push({
        id: this.nextId,
        task: taskName,
        done: false
      });
      this.nextId++;
    }
  },
  components: {
    TodoList,
    TodoInput,
    TodoButton
  }
};
</script>
<style scoped>
.task-list {
  width: 600px;
  height: 600px;
  border: 5px solid white;
  margin-top: 100px;
  margin-left: 400px;
}

.title {
  text-align: center;
}

.task-list__list {
  margin-top: 2rem;
}
</style>
<p>代码中可能存在问题，因为代码中引入了三个自定义组件 'TodoList'、'TodoInput'、'TodoButton'，但是模板中并没有使用它们，而是直接在模板中写了对应的标签名。如果这三个组件中有一些特定的功能或样式，那么这些功能或样式在模板中可能无法体现出来。另外，代码中的 'taskList' 和 'nextId' 变量名不一致，可能是笔误导致的。</p>
<p>为了优化代码，建议：</p>
<ol>
<li>检查并确保在模板中正确使用了自定义组件 'TodoList'、'TodoInput' 和 'TodoButton'，例如：</li>
</ol>
<pre><code class="language-vue">&lt;template&gt;
  &lt;div class='task-list'&gt;
    &lt;todo-list :tasks='filteredTaskList'&gt;&lt;/todo-list&gt;
  &lt;/div&gt;
&lt;/template&gt;
</code></pre>
<ol start="2">
<li>修正 'taskList' 和 'nextId' 的变量名不一致问题，确保变量名一致，例如：</li>
</ol>
<pre><code class="language-vue">&lt;script&gt;
export default {
  data() {
    return {
      taskList: [],
      nextId: 0
    }
  }
};
&lt;/script&gt;
</code></pre>
<p>此外，建议您根据实际需求和代码逻辑，进一步完善代码，例如：</p>
<ol>
<li>在组件 'TodoList' 中实现任务列表的展示和交互逻辑，例如添加任务、删除任务、标记完成等功能。</li>
<li>在组件 'TodoInput' 中实现添加新任务的功能，例如输入任务名称，点击按钮添加新任务。</li>
<li>在组件 'TodoButton' 中实现切换任务列表显示方式的功能，例如显示所有任务、显示已完成任务、显示未完成任务等功能。</li>
</ol>
<p>通过完善代码，您可以构建一个功能完善、用户友好、易于维护的任务清单应用。</p>
<p>为了更好地理解代码逻辑和优化代码，建议您阅读 Vue.js 官方文档，学习 Vue.js 组件化开发的相关知识。</p>