Level 8
Not sure why you're using Shared data to achieve this, passing through the data as props will fix this problem I guess?
Dec 20, 2022
5
Level 10
How to update a component when shared data ?
I have a nested component that shows a searchbar and an alert message if nothing was found. The info, if something was found is placed in shared data. The component looks like this:
<template>
<div>
<Searchbar @search="$emit('search')">
<slot name="input-fields"></slot>
</Searchbar>
<Alert class="mt-5 mb-5" v-show="error">{{ error }}</Alert>
</div>
</template>
<script setup>
import Searchbar from "@healy/components/search/Searchbar";
import Alert from "@healy/components/notifications/Alert";
const error = usePage().props.value.session.error;
</script>
Now when a parent componenet get updated via Interia::post(...) , then this error value does not get updated. I wonder, if its possible to somehow update this component when shared data is updated in the component itself.
Level 10
@christian-qode I am using shared data, because on success full search, page would redirect to a different page, otherwiths its going back() and stores the error in the session, just as how one would handle it when using blade..
But I guess I can stil pass it as a prop like this:
<template>
<Search @search="search" :error="error"></Search>
...
</template>
<script setup>
import Search from '../components/search/SearchLayout";
import {ref} from "vue";
import {Inertia} from "@inertiajs/inertia";
import {usePage} from "@inertiajs/inertia-vue3";
const error = ref(null);
function search() {
Inertia.post('/dashboard/users/find', {identifier: key.value});
error.value = usePage().props.value.session.error;
}
</script>
Tested it and it works, not sure if this is the proper way.
Level 8
@Elenktik Alright, but on a successful search (and redirect), I assume you doesn't have an error at all?
Level 10
@christian-qode yes, on success and on failure it will redirect (because using PRG ) and only on failure error session will be a string value, otherwise its null.
Level 8
@Elenktik Hmm I'm not familiar with that approach. Good to hear it's working now by passing the property through. I'm curious if someone else knows the best approach in this case.
Please or to participate in this conversation.