Level 58
The error you're encountering, TypeError: this is undefined, is likely due to the use of this in the nextStep function. In Vue 3's <script setup>, the this keyword is not available as it is in the Options API. Instead, you should directly reference the variables and functions.
In your nextStep function, you are trying to access this.form, but this is not defined in the context of <script setup>. You should directly use the form variable.
Here's the corrected code:
<script setup>
import AppLayout from "@/Layouts/AppLayout.vue";
import Container from "@/Components/Container.vue";
import InputError from "@/Components/InputError.vue";
import InputLabel from "@/Components/InputLabel.vue";
import TextInput from "@/Components/TextInput.vue";
import { router, useForm } from "@inertiajs/vue3";
import PrimaryButton from "@/Components/PrimaryButton.vue";
const form = useForm({
opponent: '',
});
const nextStep = () => {
router.get('duels/create/offense', { method: 'get', data: form });
}
</script>
<template>
<AppLayout title="Create Duel">
<div class="grid row mt-5">
<div class="col-span-6 m-auto">
<div class="block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
<Container>
<h1 class="text-center mb-3">
<i aria-hidden="true"></i> Choose Opponent
</h1>
<form @submit.prevent="nextStep">
<InputLabel for="opponent" value="Opponent to issue challenge" />
<TextInput
id="name"
v-model="form.opponent"
type="text"
class="mt-1 block w-full"
minlength="4"
maxlength="15"
required
autofocus
autocomplete="name"
/>
<InputError class="mt-2" :message="form.errors.opponent" />
<PrimaryButton class="ms-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
Next
</PrimaryButton>
</form>
</Container>
</div>
</div>
</div>
</AppLayout>
</template>
Explanation:
-
Remove
this: In thenextStepfunction, replacethis.formwithform. -
Direct Reference: In Vue 3's
<script setup>, you can directly reference the variables and functions without usingthis.
This should resolve the TypeError: this is undefined error you are encountering.