Laravel+Inertia.js(Vue)新增组织数据推入props后短时间丢失如何解决

• 违反Vue Prop修改规则：organisations是Inertia注入的只读Prop，Vue子组件不允许直接修改Prop值，手动修改的结果本身就不具备持久化能力。
• Inertia状态同步机制导致覆盖：所有从服务端传递的Inertia Prop都会和服务端初始渲染数据绑定，只要页面触发任意Inertia状态重同步（比如组件局部重渲染、其他Inertia请求触发状态刷新），前端手动修改的Prop值就会被服务端返回的旧值覆盖。
• 你已经在data中声明了manageOrganisations本地状态变量，但没有实际使用，没有起到托管前端状态的作用。

可以根据业务场景二选一：

方案1：本地状态托管列表（适合不需要全局同步的轻量场景） #

把Prop的值拷贝到本地data变量中，后续列表渲染、新增操作都基于本地变量，就不会被Prop的旧值覆盖。

1. 修改模板的遍历逻辑：

<!-- 把遍历对象改成本地的manageOrganisations -->
<div class="col"
     v-for="(organisation, index) in manageOrganisations"
     :key="organisation.id"
     ref="organisationItems">
    <!-- 原有代码 -->
</div>

2. 新增初始化钩子，拷贝Prop值到本地，修改新增逻辑：

export default {
    // 原有组件配置不变
    created() {
        // 组件初始化时把prop的值拷贝到本地状态
        this.manageOrganisations = [...this.organisations]
    },
    methods: {
        createOrganisation() {
            axios.post('company-organisations-create', {
                name: this.newOrganisation.name,
                description: this.newOrganisation.description
            })
            .then((response) => {
                // 往本地状态添加新数据，不会被prop覆盖
                this.manageOrganisations.push(response.data.newOrganisation);
                // 清空输入框
                this.newOrganisation = {name: '', description: ''}
            }).catch((error) => {
                window.Toast.error(error.message);
            });
        },
    }
}

方案2：Inertia原生状态同步（适合需要和服务端数据保持强一致的场景） #

不需要手动维护前端列表，用Inertia自带的请求方法提交创建，成功后自动拉取服务端最新的Prop值，从根源上避免前后端数据不一致。

1. 后端创建接口新增成功后，重定向回列表页：

public function store(Request $request)
{
    // 原有创建组织的逻辑
    $newOrganisation = Organisation::create($request->validate([
        'name' => 'required|string',
        'description' => 'nullable|string'
    ]));
    
    // 重定向到组织列表路由，Inertia会自动拉取最新的organisations数据
    return redirect()->route('company-organisations.index');
}

2. 前端把axios请求替换成Inertia路由请求：

// 顶部引入Inertia路由（根据你使用的Inertia版本调整引入路径）
import { router } from '@inertiajs/vue'

export default {
    // 原有组件配置不变
    methods: {
        createOrganisation() {
            router.post('company-organisations-create', this.newOrganisation, {
                onError: () => {
                    window.Toast.error('组织创建失败');
                },
                onSuccess: () => {
                    this.newOrganisation = {name: '', description: ''}
                    window.Toast.success('组织创建成功');
                }
            })
        },
    }
}

你原有模板中:ref="organisations"的写法不符合规范，ref属性不需要动态绑定，直接写固定字符串即可，比如ref="organisationItems"。

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