如何更新 Inertia.js 和 Vue.js 中的屬性？

Question

我正在嘗試使用 Inertia.js 更新 Vue.js 中的屬性list ：

props: {
    list: {
        type: Object, 
        default: {}
    }
},

updateTable(filters) {
    axios.post(route('updateList'), filters)
        .then(r => {
            this.list = r.data
        })
}

但我收到以下錯誤： TypeError: 'set' on proxy: trap returned falsish for property

在 Inertia.js 中，所有道具都作為代理提供。 如這篇 mdn 文章中所述，代理的set方法需要返回 true 以允許分配。 但是，我不知道如何正確實現這一點，因為我自己沒有創建代理。 有什么建議么？

還是因為 Inertia 我總是被迫使用部分重載？

Answer 1

我相信對 Vue 本身以及 Inertia 如何在這里工作存在一些誤解。

您將收到list作為道具。 不應直接更改道具。

如果您絕對需要更改它，您可以直接通過this.$page.props.list引用它，而不是將列表作為道具接收。

或者，您可以這樣做：

export default {
   props: {
      list: {
         type: Object,
         default: {}
      }
   },
   data () {
      return {
         listCopy: this.list
      }
   },
   mounted () {
      // Handle your scroll events
      axios.get(this.listCopy.next_page_url).then(response => {
         this.listCopy = {
            ...response.data,
            data: [...this.listCopy.data, ...response.data.data]
         }
      })
   }
}