如何在inertiajs和vue中更新属性

Question

我正在尝试使用InertiaJS更新vue中的属性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

在InertiaJS中，所有的属性都是作为代理提供的。正如this mdn article中所描述的，代理的set方法需要返回true才能允许赋值。但是，我不知道如何正确地实现这一点，因为我不会自己创建代理。有什么建议吗？

还是因为惯性，我总是被迫使用partial reload

Answer 1

我相信这里对Vue本身和惯性是如何工作的存在一些误解。

你收到了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]
         }
      })
   }
}