Laravel+Vue项目中，如何让编辑表单显示所有字段（含空字段）？

1. 修正Laravel控制器的变量传递 #

首先发现一个明显的变量名不一致问题：你的创建页使用了all-dessert-values="{{ $allDessertValues }}"，但编辑控制器传递的却是allDessertDefaults，这会导致Vue组件拿不到完整的属性列表。

修改edit方法，统一变量名并传递全量属性：

public function edit(Project $project) {
    return view('projects.edit', [
        'allDesserts' => Desserts::all(),
        'allDessertValues' => DessertDefaults::all(), // 和创建页变量名保持一致
        'theProject' => $project
    ]);
}

同时确认edit.blade.php的属性绑定正确（当前代码已经正确，但要和控制器传递的变量对应）：

<div>
    <project-form-for-desserts 
        :all-desserts="{{ $allDesserts }}" 
        :all-dessert-values="{{ $allDessertValues }}" 
        :project="{{ $theProject }}" 
        :project-property-values="{{ $theProject->dessertValues }}" 
        :project-photos="{{ $theProject->photos }}" 
    />
</div>

2. 在Vue组件中合并全量属性与已有值 #

核心问题是当前Vue组件只遍历了项目已填写的属性，我们需要把所有属性（来自all-dessert-values）和项目已有值合并，确保每个属性都有对应的键（哪怕是空值）。

先在组件中定义props并添加计算属性：

<script>
export default {
    props: {
        allDessertValues: {
            type: Array,
            required: true
        },
        project: {
            type: Object,
            required: true
        },
        projectPropertyValues: {
            type: Array,
            default: () => []
        }
    },
    computed: {
        fullProjectProperties() {
            // 把已有属性值转成键值对对象（根据你的实际数据结构调整键名）
            const existingValues = this.projectPropertyValues.reduce((acc, item) => {
                acc[item.property_id] = item.value;
                return acc;
            }, {});

            // 遍历所有属性，合并已有值，未填写的设为空
            return this.allDessertValues.map(property => ({
                id: property.id,
                name: property.name,
                value: existingValues[property.id] || ''
            }));
        }
    }
}
</script>

3. 修改Vue模板的循环逻辑 #

把原来循环已填属性的逻辑，改成循环我们计算出的全量属性列表：

<template>
    <v-card>
        <v-form>
            <!-- 基础信息模块保持不变 -->
            <v-card>
                <v-row>
                    <v-col>
                        <v-card-title>Name</v-card-title>
                        <v-text-field v-model="project.name" label="Please enter the dessert name" />
                    </v-col>
                    <v-col>
                        <v-card-title>Reference</v-card-title>
                        <v-text-field v-model="project.type" label="Please enter the dessert type" />
                    </v-col>
                </v-row>
            </v-card>

            <!-- 循环所有属性，包含未填写的字段 -->
            <v-card v-for="prop in fullProjectProperties" :key="prop.id" flat>
                <v-row>
                    <v-col>
                        <v-card-title>{{ prop.name }}</v-card-title>
                        <v-select v-model="prop.value" :items="allDesserts" />
                    </v-col>
                </v-row>
            </v-card>

            <v-btn @click="addDessert"> Add </v-btn>
        </v-form>
    </v-card>
</template>

补充提示 #

• 请根据你实际的数据库字段结构调整代码中的键名（比如property.id、item.property_id）；
• 如果projectPropertyValues本身就是键为属性ID的对象，可以省略reduce步骤，直接遍历取对应值；
• 确保allDessertValues确实包含了所有需要显示的属性，这是渲染全量字段的前提。

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