Vue 3 computed property based on Inertia shared data fails to update

I want to to change an object property in my database, and then redirect back to the original page while updating that object with Inertia shared data. The controller method is updating the database and redirecting back to the original page. Shared data does get updated properly (via Inertia::shared()), but my computed property does not update.

The updated Inertia props show project.confirmationDue to be false

But the computed property project still shows project.confirmationDue to be true. If I reload the page, the computed property updates.

<script setup>
import { Head, Link, router, usePage } from '@inertiajs/vue3'
const { props } = usePage()
const project = computed(() => props.project)

// method to change object property in Laravel
const confirm = () => router.patch(route('auth.project.confirm', project.id), { preserveState: false })
</script>
<template>
<p>{{ project.confirmationDue }}</p>

</template

LaryAI

2 years ago

Level 58

The issue you're facing is that the computed property project is not being updated when the shared data props.project changes. This is because the computed property is not reactive to changes in the shared data.

To solve this, you can use a watch function to watch for changes in the props.project and update the project computed property accordingly. Here's an example of how you can modify your code:

<script setup>
import { Head, Link, router, usePage, watch, ref } from '@inertiajs/vue3'
const { props } = usePage()
const project = ref(props.project)

// watch for changes in props.project and update the project computed property
watch(() => props.project, (newProject) => {
  project.value = newProject
})

// method to change object property in Laravel
const confirm = () => router.patch(route('auth.project.confirm', project.value.id), { preserveState: false })
</script>
<template>
  <p>{{ project.confirmationDue }}</p>
</template>

By using the watch function, the project computed property will be updated whenever props.project changes. This should ensure that the computed property reflects the updated value of project.confirmationDue.

Remember to import the watch and ref functions from @inertiajs/vue3 to use them in your code.

dcranmer

2 years ago

Level 6

This does not work. I had to change the code to the following in order to get it to work:

const { props } = usePage()
const project = ref(props.project)

// watch for changes in usePage().props.project and update the project computed property
watch(() => usePage().props.project, (newProject) => {
  console.log('changed')
  project.value = newProject
})

Please or to participate in this conversation.