Level 104
Use the Inertia Link component instead
3 likes
May 31, 2022
3
Level 1
Inertia reloads whole page instead of SPA
Hello I am trying Inertia with Laravel Jetstream and Vue for a small project. All routes are behaving like a SPA expect one and I don't know why.
Route::resource('plants', PlantsController::class);
When I click on the edit link it refreshes the whole page.
<template>
<div v-for="plant in plants" :key="plant.id">
<p>Plant Name: {{ plant.name }}</p>
<p>Plant Description: {{ plant.description }}</p>
<p>Days to water: {{ plant.days_to_water }}</p>
<p>Water: {{ plant.water_count }}</p>
<p>Sun: {{ plant.sun }}</p>
<p>Created at: {{ formatDate(plant.created_at) }}</p>
<a :href="route('plants.edit', plant.id)">Edit</a>
<br />
</div>
</template>
<script>
import { format } from "date-fns";
export default {
methods: {
formatDate(date) {
return format(new Date(date), "dd.MM.yyyy");
},
},
props: {
plants: {
type: Object,
},
},
};
</script>
My edit method from PlantsController
public function edit($id)
{
$userId = auth()->user()->id;
$plant = Plant::findOrFail($id);
if ($plant->user_id !== $userId) abort(403);
return Inertia::render('Plants/PlantsForm', compact('plant'));
}
And the form
<script>
import { Inertia } from "@inertiajs/inertia";
import { useForm, Head } from "@inertiajs/inertia-vue3";
import AppLayout from "../../Layouts/AppLayout.vue";
export default {
setup(props) {
const form = useForm({
plantName:
props.plant !== undefined && props.plant.name !== undefined
? props.plant.name
: "",
description:
props.plant !== undefined &&
props.plant.description !== undefined
? props.plant.description
: "",
daysToWater:
props.plant !== undefined &&
props.plant.days_to_water !== undefined
? props.plant.days_to_water
: "",
waterCount:
props.plant !== undefined &&
props.plant.water_count !== undefined
? props.plant.water_count
: "",
sun:
props.plant !== undefined && props.plant.sun !== undefined
? props.plant.sun
: "",
});
function createPlant() {
Inertia.post(route("plants.store"), form);
}
function updatePlant() {
console.log("update");
Inertia.put(route("plants.update", props.plant.id), form);
}
function deletePlant() {
Inertia.delete(route("plants.destroy", props.plant.id), form);
}
return { form, createPlant, updatePlant, deletePlant };
},
props: {
plant: {
type: Object,
},
},
components: { AppLayout, Head },
};
</script>
<template>
<AppLayout>
<Head title="New Plant" />
<form @submit.prevent class="flex flex-col gap-4 p-4">
<div class="flex flex-col">
<label for="plantName">Plant Name:</label>
<input v-model="form.plantName" id="plantName" type="text" />
</div>
<div class="flex flex-col">
<label for="description">Plant Description:</label>
<textarea
name="description"
id="description"
cols="30"
rows="10"
v-model="form.description"
></textarea>
</div>
<div class="flex flex-col">
<label for="days-to-water">Days to water:</label>
<input
v-model="form.daysToWater"
type="number"
id="days-to-water"
/>
</div>
<div class="flex flex-col">
<label for="water-count">How much water:</label>
<select
v-model="form.waterCount"
name="water-count"
id="water-count"
>
<option value="0" selected>None</option>
<option value="1">Low</option>
<option value="2">Medium</option>
<option value="3">High</option>
</select>
</div>
<div class="flex flex-col">
<label for="sun">How much sun?</label>
<select v-model="form.sun" name="sun" id="sun">
<option value="0" selected>None</option>
<option value="1">Shadow</option>
<option value="2">Half-shadow</option>
<option value="3">Sun</option>
</select>
</div>
<button
v-if="plant === undefined"
type="submit"
@click="createPlant"
>
Create
</button>
<!-- If there are no plant props, I know that the plant does not exist so it's a store method -->
<button
v-if="plant !== undefined"
type="submit"
@click="updatePlant"
>
Save
</button>
<button
v-if="plant !== undefined"
type="submit"
@click="deletePlant"
>
Delete
</button>
<!-- If there is a plant prop, I know that the plant already exits and it's an edit/delete method -->
</form>
</AppLayout>
</template>
I am using the same form-view-file for creating, edit and deleting a plant.
I don't know why the edit route is refreshing the whole page. For example if I am at the edit form and go back to the dashboard, it behaves like a SPA and like every other routes. Thanks for your help :).
Level 1
@tykus I am so stupid, totally forgot about that. Thank you for your quick reply :).
Level 1
You can also use the inertia router.visit(url) as well
1 like
Please or to participate in this conversation.