Vue中v-for渲染TaskList任务内容失败，求合规布局解决方案

我用Vue+Vuetify开发了一个Todo任务清单应用，支持创建任务、切换完成状态、删除任务，数据存储在MongoDB中。目前遇到的问题是：控制台已确认任务数据成功获取，但页面无法显示任务详情；移除TaskList.vue中<v-list-item>内部的<template>标签后任务能显示，但不符合作业要求的布局格式。

相关代码 #

TaskList.vue #

<template>
  <div id="task-list">
    <v-list-item-group>
      <v-list-item v-for="task in tasks" :key="task._id">
        <template>
          <v-list-item-action>
            <v-btn icon @click="updateTask(task)">
              <v-icon v-if="task.Done=true">check_box</v-icon>
              <v-icon v-else>check_box_outline_blank</v-icon>
            </v-btn>
          </v-list-item-action>
          <v-list-item-content>
            <v-list-item-title>
              {{ task.Text }}
            </v-list-item-title>
            <v-list-item-subtitle>
              {{ task.Date }}
            </v-list-item-subtitle>
          </v-list-item-content>
          <v-list-item-action>
            <v-btn icon @click="deleteTask(task)">
              <v-icon color="red">delete</v-icon>
            </v-btn>
          </v-list-item-action>
        </template>
      </v-list-item>
    </v-list-item-group>
  </div>
</template>

<script>
export default {
  name: "TaskList",
  props: {
    tasks: {
      type: Array,
      default: () => [],
    },
    updateTask: {
      type: Function,
      default: () => {},
    },
    deleteTask: {
      type: Function,
      default: () => {},
    },
  }
};
</script>

Home.vue #

<template>
  <div class="home">
    <v-card class="mx-auto" max-width="900" v-if="fetched">
      <new-task-form @formSubmit="createTask"></new-task-form>
      <v-divider></v-divider>
      <v-list subheader two-line flat>
        <v-list-subheader>
          {{ user.UserName }}'s Tasks:
        </v-list-subheader>
        <task-list :tasks="tasks" :user="user" :updateTask="updateTask" :deleteTask="deleteTask"></task-list>
      </v-list>
    </v-card>
  </div>
</template>

<script>
import { getCurrentDate } from '@/util'
import NewTaskForm from '@/components/NewTaskForm.vue';
import TaskList from '@/components/TaskList.vue';

export default {
  name: 'Home',
  components: {
    NewTaskForm,
    TaskList
  },
  props: {
    user: Object
  },
  data: () => ({
    fetched: false,
    tasks: [],
    taskForm: {
      Text: '',
      Date: ''
    },
  }),

  mounted() {
    this.readTasks();
  },

  methods: {
    // 创建新任务
    async createTask(formData) {
      try {
        await fetch(`${process.env.VUE_APP_API_ORIGIN}/api/v1/tasks`, {
          method: 'POST',
          credentials: 'include',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify(formData),
        });
        this.readTasks();
        console.log("Task created:", formData);
      } catch (error) {
        console.error('Error:', error);
      }
    },

    // 获取任务列表
    async readTasks() {
      try {
        const response = await fetch(`${process.env.VUE_APP_API_ORIGIN}/api/v1/tasks`, {
          method: 'GET',
          credentials: 'include',
        });
        if(!response.ok) throw new Error('Failed to fetch tasks');
        const data = await response.json();
        this.tasks = data;
        console.log(data)
        this.fetched = true;
      } catch (error) {
        console.error('Error:', error);
      }
    },

    // 更新任务状态
    async updateTask(task) {
      try {
        await fetch(`${process.env.VUE_APP_API_ORIGIN}/api/v1/tasks/${task._id}`, {
          method: 'PUT',
          credentials: 'include',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({Done: "task.Done"}),
        });
        this.readTasks();
      } catch (error) {
        console.error('Error:', error);
      }
    },

    // 删除任务
    async deleteTask(task) {
      try {
        const response = await fetch(`${process.env.VUE_APP_API_ORIGIN}/api/v1/tasks/${task._id}`, {
          method: 'DELETE',
          credentials: 'include',
        });
        if (response.ok) {
          this.readTasks();
        } else {
          throw new Error('Failed to delete task');
        }
      } catch (error) {
        console.error('Error:', error);
      }
    },
  }
}
</script>

<style scoped>
.form {
  padding: 0 1rem;
}
</style>

控制台输出 #

GET
http://localhost:1337/api/v1/tasks
[HTTP/1.1 304 Not Modified 356ms]

0   Object { _id: "6556cb8a15a22a48d0970a88", UserId: "6549e0c4484119e8a7e0c432", Text: "Create a new task 2 ", … }
_id "6556cb8a15a22a48d0970a88"
UserId  "6549e0c4484119e8a7e0c432"
Text    "Create a new task 2 "
Done    false
Date    "2023-11-17T02:09:58.923Z"
__v 0

解决方案 #

1. 移除无效的内部<template>标签 #

Vuetify的<v-list-item>组件不需要额外包裹<template>，直接将<v-list-item-action>和<v-list-item-content>作为其直接子元素即可，这是导致任务无法渲染的核心原因。

2. 修复条件判断错误 #

v-if="task.Done=true"是赋值操作，应改为v-if="task.Done"（正确的布尔值判断）。

3. 修正更新任务的请求体 #

updateTask方法中body: JSON.stringify({Done: "task.Done"})会将字符串"task.Done"传给后端，应改为{Done: !task.Done}来切换任务的完成状态。

修改后的核心代码 #

TaskList.vue（关键部分）

<v-list-item v-for="task in tasks" :key="task._id">
  <v-list-item-action>
    <v-btn icon @click="updateTask(task)">
      <v-icon v-if="task.Done">check_box</v-icon>
      <v-icon v-else>check_box_outline_blank</v-icon>
    </v-btn>
  </v-list-item-action>
  <v-list-item-content>
    <v-list-item-title>
      {{ task.Text }}
    </v-list-item-title>
    <v-list-item-subtitle>
      {{ task.Date }}
    </v-list-item-subtitle>
  </v-list-item-content>
  <v-list-item-action>
    <v-btn icon @click="deleteTask(task)">
      <v-icon color="red">delete</v-icon>
    </v-btn>
  </v-list-item-action>
</v-list-item>

Home.vue（updateTask方法）

async updateTask(task) {
  try {
    await fetch(`${process.env.VUE_APP_API_ORIGIN}/api/v1/tasks/${task._id}`, {
      method: 'PUT',
      credentials: 'include',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({Done: !task.Done}),
    });
    this.readTasks();
  } catch (error) {
    console.error('Error:', error);
  }
},

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