Laravel+InertiaJS项目中Vue输入框偶发不可编辑、刷新后恢复正常的问询

• Inertia 页面跳转的DOM复用冲突
  这是该技术栈下这类偶发问题最常见的诱因：Inertia 做前端路由切换时，会尽可能复用结构匹配的DOM节点降低渲染开销，如果不同页面/同页面不同状态下存在id完全一致的input节点，复用过程就可能将旧节点上残留的只读状态、错位的事件绑定带过来，直接表现为新挂载的输入框完全无法输入，刷新页面重新挂载DOM后状态自然恢复正常。
  对应解决操作：
  1. 给所有动态渲染的表单项绑定唯一的:key值，比如关联当前页面路由、表单区块的唯一标识，强制Vue在识别节点复用冲突时重新创建DOM，不做硬复用
  2. 全局排查所有input节点的id值，确保跨页面没有完全重名的id，避免Inertia的DOM复用逻辑错配节点
• v-model 响应式链路失效
  你当前代码里order_data的字段初始值设为null，如果页面加载过程中，有同步逻辑（比如从后端props同步赋值、第三方表单库的初始化流程）直接把整个order_data替换成了非响应式的普通对象，v-model的双向绑定就会直接失效，表现和原生只读输入框没有区别。
  对应解决操作：
  1. 排查所有对order_data做赋值的代码，不要直接把未经Vue响应式处理的普通对象整个赋值给this.order_data
  2. 把order_data里的输入类字段初始值从null改成空字符串''，避免初始化阶段的类型转换异常破坏响应式追踪
• 全局脚本的状态残留
  部分全局挂载的脚本（比如表单校验插件、防重复提交拦截、第三方埋点工具）会在特定时机给表单区域加上readonly属性、拦截input事件，如果这类逻辑没有做状态复位，碰到Inertia的DOM复用时，旧的拦截状态就会被带到新页面的输入框上，造成无法输入的问题。
  对应解决操作：
  1. 问题复现时直接在浏览器控制台选中对应input节点，检查元素属性里有没有被莫名加上readonly、disabled标记，再通过事件监听器面板定位是哪个脚本绑定了阻止输入的逻辑
  2. 所有全局拦截输入的逻辑，必须在组件的beforeUnmount/onUnmounted生命周期里做状态清除，避免旧状态附着到复用的DOM节点上

可以优先排查Inertia DOM复用相关的问题，这类场景占到该类故障的90%以上，排查成本最低。

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