Django+Vue.js开发看板时按状态分组展示任务的问题咨询

问题根因 #

status.items_set.all是Django ORM提供的反向关联查询能力，仅能在Django模板环境下使用。前后端分离架构中，前端Vue拿到的仅为DRF序列化返回的纯JSON数据，你当前的StatusSerializer未序列化关联的Items数据，所以前端的status对象不存在items_set属性，自然触发报错。

解决方案1：后端嵌套序列化（推荐） #

直接在DRF序列化阶段就把每个Status对应的Items数据嵌套返回，前端直接遍历即可。

1. 修正api/serializers.py代码：

from rest_framework import serializers
from .models import Items, Status


class ItemsSerializer(serializers.ModelSerializer):
    class Meta:
        model = Items
        read_only_fields = (
            'created_by',
            'created_at',
        )
        # 修正原代码换行导致的语法错误
        fields = ('id','notes','status','priority','start_date','end_date')

class StatusSerializer(serializers.ModelSerializer):
    # 新增反向关联的Items列表序列化
    items = ItemsSerializer(many=True, read_only=True, source='items_set')
    class Meta:
        model = Status
        read_only_fields = (
            'created_by',
        )
        # 新增items字段到返回值
        fields = ('status','id','pk', 'items')

2. 修改Vue模板的遍历逻辑，把原来的v-for="task in status.items_set.all"替换为：

v-for="task in status.items"

解决方案2：前端自行过滤（无需改后端） #

如果暂时不想调整后端接口，可以在前端拿到全量任务和状态列表后，手动给每个状态匹配对应的任务。

1. 修改Vue的JS逻辑：

import axios from 'axios'
export default {
    name: 'Tasks',
    data() {
        return {
            tasks: [],
            statusList: [],
        }
    },
    async mounted() {
        // 等待两个接口请求完成后处理数据
        await Promise.all([this.getTasks(), this.getStatus()])
        // 给每个状态挂载对应的任务列表
        this.statusList = this.statusList.map(status => ({
            ...status,
            tasks: this.tasks.filter(task => task.status === status.id)
        }))
    },
    methods: {
        async getTasks() {
            this.$store.commit('setIsLoading', true)
            try {
                const response = await axios.get('/api/v1/tasks')
                this.tasks = response.data
            } catch (error) {
                console.log(error)
            } finally {
                this.$store.commit('setIsLoading', false)
            }
        },
        async getStatus() {
            this.$store.commit('setIsLoading', true)
            try {
                const response = await axios.get('/api/v1/status')
                this.statusList = response.data
            } catch (error) {
                console.log(error)
            } finally {
                this.$store.commit('setIsLoading', false)
            }
        }
    }
}

2. 修改Vue模板的遍历逻辑，把原来的v-for="task in status.items_set.all"替换为：

v-for="task in status.tasks"

额外注意 #

你当前Items模型中priority字段的默认值设为了"2"，但你定义的PRIORITY_CHOICES里没有对应取值，会导致存数据时报错，建议把默认值改为"Low"或者其他存在的选项值。

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