Update global Inertia Variables (Laravel with Vue)

Question

I'm using Inertia with VueJS, in the HandleInertiaRequests I have the variable 'foo':

 public function share(Request $request): array
    {
        return [
            'foo' => str()->random(1000)
        ];
    }

Exists a way to update this variable in a VueJS without refreshing the view?

<script setup>
const updateFoo = () => {
// do something here
}
</script>

<template>
{{ $page.props.foo }}

<button @click="updateFoo" type="button">update</button>
</template>

Amade · Accepted Answer · 2024-08-14 09:47:03Z

0

You can assign the value of foo to a state variable, and then interact with the state variable instead of the props value:

<script setup>
import { ref } from "vue";

const foo = ref(props.foo);

const updateFoo = () => {
// do something here
}
</script>

<template>
{{ foo }}

<button @click="updateFoo" type="button">update</button>
</template>

answered Aug 14, 2024 at 9:47

Amade

4,0182 gold badges30 silver badges55 bronze badges

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

Collectives™ on Stack Overflow

Update global Inertia Variables (Laravel with Vue)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related