InertiaJS提交表单并重载页面后isDirty仍为true如何解决？

问题根因 #

1. 提交方式错误：你直接调用全局this.$inertia.post方法提交数据，没有使用Inertia表单实例自带的提交方法，表单实例无法自动感知请求完成状态，也就不会自动重置isDirty标记。
2. 表单初始值未同步更新：你把表单初始化逻辑放在data中，只会在组件首次挂载时执行一次。后续重定向回index页面后，props返回的restaurantCategories已经是最新数据，但表单的初始值仍然是首次挂载时的旧数据，新旧数据对比永远不一致，导致isDirty始终为true，哪怕手动刷新页面也不会重新触发data初始化逻辑。
3. 引用类型对比误差：你在checkedCategories中存储的是完整的分类对象，Inertia的isDirty是浅对比逻辑，就算两个对象的属性完全一致，只要引用地址不同，就会被判定为数据已修改。

修复步骤 #

1. 修正Vue data写法与表单初始化逻辑 #

不要在data中直接用props初始化表单，改为监听props变化动态更新表单值，同时把data改为函数返回格式（Vue2要求组件data必须是函数，避免数据污染）：

export default{
  props: {
    filters: Object,
    restaurantCategories: Object,
    allCategories: Object,
  },
  data() {
    return {
      updateForm: this.$inertia.form({
        checkedCategories: [],
      }),
    }
  },
  watch: {
    restaurantCategories: {
      immediate: true,
      handler(newVal) {
        // 每次分类数据更新时，同步更新表单值并重置脏标记
        this.updateForm.checkedCategories = newVal.map(resCat => resCat.category)
        this.updateForm.reset('checkedCategories')
      }
    }
  },
  // 其余代码
}

2. 改用表单实例自带的提交方法 #

不要调用全局$inertia.post，改为调用updateForm实例自己的post方法，请求成功后自动处理状态，也可以手动触发重置：

methods:{    
  sendUpdate() {
    this.updateForm.post(
      this.route("restaurant.categories.store"),
      {
        preserveScroll: true, // 可选，提交后保持页面滚动位置
        onSuccess: () => {
          // 可选，手动重置表单到最新初始状态
          this.updateForm.reset()
        }
      }
    );
  },
}

3. 优化存储结构避免引用对比误差（可选但推荐） #

把checkedCategories改为存储分类ID数组，而非完整对象，从根源避免浅对比误差：
前端修改初始化逻辑：

this.updateForm.checkedCategories = newVal.map(resCat => resCat.category.id)

后端修改store方法的取值逻辑：

foreach ($request->checkedCategories as $categoryId) {
    auth()->user()->currentTeam->categories()
        ->create(['category_id' => $categoryId]);
}

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