Level 102
Show the code for both methods so we know what you are working with
Jul 25, 2022
10
Level 1
reload prop after `redirect()->back()`
I have a list and a form on the same page. Submitting the form adds to the list then redirects back to the same page. The prop in the response contains the new list item but doesn't reflect on the page. How can I achieve this?
Level 1
@Sinnbeck php
public function index()
{
return Inertia::render('Items/Index', [
'items' => Item::all()
]);
}
public function create(Request $request)
{
$this->validate($request, ['name' => 'required|unique:items|max:255',]);
Item::create(['name' => $request->name,]);
return redirect()->back();
}
vue
<script>
export default {
props: ['items'],
data(){return{
form: this.$inertia.form({
name: null,
})
}},
methods: {
submit() { this.form.post('/dashboard/items/new') },
},
}
</script>
<template>
<form @submit.prevent="submit">
<input type="text" v-model="form.name" />
<button :class="button" type="submit">Create</button>
</form>
<p v-for="item in items" :key="item.id">{{item.name}}</p>
</template>
Level 102
@owen2jan so this is a component and not a page component? I dont use vue myself but as I understand it,, the props are normally bound to $page.props.items
Level 1
@Sinnbeck Thanks for the reply, however, I don't think this will work in my case as the prop also needs to be attached to some variable so I can filter the items list too. Lemme restructure my question to include that.
Level 1
managed to solve this with :
submit() {
this.form.post('/dashboard/items/new', {
onSuccess: () => this.$inertia.visit('/dashboard/items')
})
},
however, not sure this is the right way to do this.
Level 102
@owen2jan That seems off to me. I do this (the original way) all over my own app (with react) and never had issues. On components I often use usePage() to get the content
Sorry but this is the only page I can find that references it. https://inertiajs.com/shared-data#accessing-shared-data
Level 1
@Sinnbeck setting it as shared data will get the data for every request. I think my issue is that the prop wasn't reactive. I managed to solve this by reloading the page onSuccess as above but or even better solution is using toRefs
import { toRefs } from 'vue'
setup(props){
const { items: finalItems } = toRefs(props)
return { finalItems }
},
Level 102
@owen2jan Yeah I wasnt talking about the shared data part. I was talking about the usePage() Thats why I said
Sorry but this is the only page I can find that references it.
1 like
Level 1
@Sinnbeck Ah, this also works! Sorry I didn't understand as I was checking the vue2 example.
Level 102
@owen2jan Awesome. I could have sworn there was a whole section on usePage() as its quite important, but I could be mistaken
Please or to participate in this conversation.