如何在组件中可视化tasks数组的title字段？

算力阿峰

2026-7-22

问题解决：新创建任务的Title无法在子组件显示

核心问题排查与修复

1. 修正Store初始状态的语法错误

你当前Store里tasks的初始化写法不符合JS对象语法，正确的数组对象格式应为：

export const state = () => ({
  tasks: [{ title: "", completed: false }]
});

2. 保证添加任务时正确传入Title值

检查添加任务的mutation逻辑，必须将用户输入的title赋值给新任务对象：

// Store中的mutation示例
export const mutations = {
  ADD_TASK(state, title) {
    state.tasks.push({
      id: Date.now(), // 给每个任务分配唯一ID，作为v-for的key
      title: title,
      completed: false
    });
  }
};

3. 补全子组件的方法定义

你的Task.vue中声明了toggleTask和deleteTask方法但未实现，会引发控制台报错影响渲染，补充方法：

<script>
export default {
  props: ['task'],
  methods: {
    toggleTask() {
      this.$store.commit('TOGGLE_TASK', this.task.id);
    },
    deleteTask() {
      this.$store.commit('DELETE_TASK', this.task.id);
    }
  }
};
</script>

4. 验证父组件的数据传递逻辑

父组件需确保从Store正确获取任务列表，同时完善添加任务的交互：

<template>
  <div>
    <input v-model="newTaskTitle" placeholder="输入任务标题">
    <button @click="addTask">Add</button>
    
    <Task v-for="task in tasks" :key="task.id" :task="task" />
  </div>
</template>

<script>
import Task from '~/components/Task.vue';

export default {
  components: { Task },
  data() {
    return {
      newTaskTitle: ''
    };
  },
  computed: {
    tasks() {
      return this.$store.state.tasks;
    }
  },
  methods: {
    addTask() {
      if (this.newTaskTitle.trim()) {
        this.$store.commit('ADD_TASK', this.newTaskTitle);
        this.newTaskTitle = '';
      }
    }
  }
};
</script>