How to update a property in Inertia.js and Vue.js?

Question

I am trying to update a property list in Vue.js using Inertia.js:

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

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

But I get the following error: TypeError: 'set' on proxy: trap returned falsish for property

In Inertia.js, all props are provided as proxies. As described in this mdn article, the proxie's set method needs to return true to allow the assignment. However, I have no idea how to correctly achieve that as I do not create the proxy myself. Any suggestions?

Or is it that with Inertia I would always be forced to use a partial reload?

Matheus Dal'Pizzol · Accepted Answer · 2021-09-01 14:47:19Z

1

I believe there's some misunderstandings of Vue itself and how Inertia works here.

You're receiving the list as a prop. Props should not be directly changed.

If you ABSOLUTELY need to change it, you can reference it directly by this.$page.props.list instead of receiving the list as a prop.

Or, you can do this:

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]
         }
      })
   }
}

edited Sep 1, 2021 at 14:47

answered Aug 31, 2021 at 13:32

Matheus Dal'Pizzol

6,1253 gold badges24 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

marks Over a year ago

Thanks for you answer. I get the point of killing the purpose of inertia. However, in this specific case it's about extending the list's content with an intersectionObserver when you've scroll to the end and I don't think that reloading would be the best way to do things here. That's why I would rather append to the original list instead.

Matheus Dal'Pizzol Over a year ago

Ok... I get it... I updated the answer... see if this is what you were looking for...

Collectives™ on Stack Overflow

How to update a property in Inertia.js and Vue.js?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related