What is the process for updating a property in Inertia.js and Vue.js?

Question

What is the process for updating a property in Inertia.js and Vue.js?

I am attempting to modify the list property in Vue.js using Inertia.js:

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

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

However, I encountered the error message:

TypeError: 'set' on proxy: trap returned falsish for property

In Inertia.js, all props are provided as proxies. According to this MDN article, the proxy's set method must return true for allowing assignment. I'm unsure how to achieve this correctly since I didn't create the proxy myself. Any suggestions?

Do I always need to resort to a partial reload when working with Inertia?

javascript vue.js inertiajs es6-proxy

Answer 1

Answer №1

There seems to be some confusion regarding the workings of Vue and Inertia in this scenario.

The prop list is being passed to you, and it's generally discouraged to directly modify props.

If necessary, you can access it using this.$page.props.list rather than receiving it as a prop.

Alternatively, you could consider implementing the following approach:

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

Answer 2

There seems to be some confusion regarding the workings of Vue and Inertia in this scenario.

The prop list is being passed to you, and it's generally discouraged to directly modify props.

If necessary, you can access it using this.$page.props.list rather than receiving it as a prop.

Alternatively, you could consider implementing the following approach:

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

What is the process for updating a property in Inertia.js and Vue.js?

Answer №1

Similar questions

What is the method for selecting an element using CSS code in Protractor?

Strategies for extracting methods and refactoring to a separate file for better reusability

What are the steps to utilize V-mask for showing numbers in the thousands with a decimal point?

Adding custom styles to an unidentified child element in React using Material-UI

Feeling unsure about the concepts of scoping and the "this"

Vuex was unable to locate the required dependency

We have encountered an issue with the syntax in the code: ajaxsample/update_agenda. It seems to be an unrecognized expression according to

Fetching server-side data for isomorphic React app: A guide to accessing cookies

Tips for creating a script that compiles all SCSS files into CSS within a Vue 3 project

Using Vue.js to utilize a component within another component

I am attempting to establish a connection with the Converge Pro 2 system from Clearone using NodeJS node-telnet-client, but unfortunately, my efforts to connect have been unsuccessful

Is there a way to disable responsiveness on a website?

The most lightweight scraper for individual website pages

Exploring Next.js: Leveraging fetch to retrieve data in getServerSideProps and passing it to the client via query parameters

What is the best method for enabling communication between two users when the identification numbers created by socketIO are automatically generated?

Streamlining a map-generated object

Identifying the specific filter used in Vue-tables-2

Switching from Vanilla JS to Vue.js, dealing with querySelector problems

Integrating Asp.Net Core for server-side functionality with React for client-side interactions

When should you opt for a plugin over a traditional module in Fastify?