The prop does not update after inertia.post

Versions:

• @inertiajs/inertia version: 0.8.2
• @inertiajs/inertia-vue3 version: 0.3.4

Describe the problem:

For testing proposes I have develop a simple testing case, I cannot get it working to refresh data after “Submit” button pressed. I am using Laravel 8 + InertiaJS + Vue3.

Very simple and but still I cannot make it refresh the prop ‘documents’ after hitting Test button as a simulation of a form submit.

In the Controller I have write for testing purpose date(‘H:i;s’), because if I access the url on the browser, i have current time with seconds included.

If I hit refresh on browser, the date is updated but if I hit Test button it makes the network request for POST /manufacturers/save, then I can see in the network the GET for /manufacturers, which contains updated date but on the front it will not update.

What I am doing wrong?

Steps to reproduce:

This is the web.php:

<?php

use App\Http\Controllers\Catalog\ManufacturersController;
use App\Http\Controllers\DashboardController;
use Illuminate\Support\Facades\Route;

Route::get('/', [ DashboardController::class, 'index']);
Route::prefix('catalog')->group(function () {
        Route::get('manufacturers', [ManufacturersController::class, 'index']);
        Route::post('manufacturers/save', [ManufacturersController::class, 'save']);
    }
);

---

This is the controller:

<?php namespace App\Http\Controllers\Catalog;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Redirect;
use Inertia\Inertia;

class ManufacturersController extends Controller
{
    public function index()
    {

        return Inertia::render('Catalog/Manufacturers/Index', [
            'documents' => [
                ['name' => 'Timestamp ' . date('H:i:s')],
            ]
        ]);
    }

    public function save()
    {
        return redirect()->back();
    }
}

---

This is the component:

<template>
    <div>
        <div v-for="(name, index) in documents" :key="index">{{ name }}</div>
        <el-button @click="save()">Test</el-button>
    </div>
</template>

<script>
import Layout from "../../../Common/Layout";

export default {

layout: Layout,
    props: ['documents'],
    data() {
        return {
        }
    },
    methods: {
        save() {
            this.$inertia.post('/catalog/manufacturers/save');
        }
    }
}
</script>

[Tofandel]

Okay it was a reactivity issue

I was using it like

const {props: $props} = usePage();

const list = ref({ something: true, data: $props.value.someProp});

return { list };

And obviously I needed to use a computed property, got mislead by the fact $props was already a computed property, but it doesn’t matter because I’m accessing a value in that computed property

const {props: $props} = usePage();

const list = ref({ something: true, data: computed(() => $props.value.someProp}));

return { list };

[Erutan409]

This doesn’t appear to be working on Vue 2. I can see the $inertia.page.props NOT updating in Vue Dev tools, but they show the right data when I manually evaluate the data in the console. So, it doesn’t trigger any watchers, attached, to update. First tried returning an object and watching, deep. Then tried it on a per scalar property level on $inertia.page.props. If I’m making code changes in dev mode (using vite), I can see it finally seeing the updated value, but only because it seems to force a re-render. I don’t understand why this isn’t working as it should be.

Hoping I’m just missing something in the docs…?

I figured out how this is meant to be used. @ape-les Was on the right track with the link they posted. The data I was targeting doesn’t appear to be used, reactively. I’m avoiding page reloads, altogether. So, I needed to store a static object with my flash messages and then listen to the navigate event on $inertia to grab the data from said event. When I change it on a reactive piece of data, I achieve what I need.

I hope this write-up helps anyone else who might be struggling with this.