如何在Inertia.js与Vue.js中更新属性？proxy set报错如何解决？

报错根因 #

Inertia.js 传递给组件的所有props默认是只读的响应式代理，遵循单向数据流设计，禁止在组件内部直接修改props值，直接对this.list赋值触发了代理的set拦截规则，才会返回该错误。

可选解决方法 #

• 方案1：本地维护props拷贝（适合仅前端修改数据、不需要同步回Inertia全局状态的场景）
  将接收的list props深拷贝一份存到组件本地data中，后续修改和渲染都使用本地变量：

// 组件data定义
data() {
  return {
    // 深拷贝props避免引用代理对象
    localList: structuredClone(this.list)
  }
},
props: {
  list: {
    type: Object, 
    default: {}
  }
},
methods: {
  updateTable(filters) {
    axios.post(route('updateList'), filters)
      .then(r => {
        // 直接修改本地状态，不会触发代理限制
        this.localList = r.data
      })
  }
}

• 方案2：使用Inertia局部刷新（适合需要服务端返回最新数据、同步更新Inertia全局props的场景）
  不要自行使用axios发送请求，改用Inertia内置的路由方法触发局部更新，Inertia会自动同步更新props，不需要手动赋值：

updateTable(filters) {
  this.$inertia.post(route('updateList'), filters, {
    // 仅更新list props，减少传输数据量
    only: ['list'],
    // 保留组件现有本地状态，避免重置其他输入值
    preserveState: true
  })
}

使用该方案时需要服务端处理完请求后，返回包含最新list字段的响应即可，组件会自动感知props的更新触发重渲染。

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