Refactoring Vue template causes errors

I'm trying to refactor the create Vue Template (resources/js/Pages/duels/create.vue):

<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 {useForm} from "@inertiajs/vue3";
import PrimaryButton from "@/Components/PrimaryButton.vue";

const props = defineProps(['offensive_moves', 'defensive_moves']);

const form = useForm({
    opponent: '',
    offensive_move1: props.offensive_moves[0].id,
    offensive_move2: props.offensive_moves[0].id,
    offensive_move3: props.offensive_moves[0].id,
    offensive_move4: props.offensive_moves[0].id,
    offensive_move5: props.offensive_moves[0].id,
    offensive_move6: props.offensive_moves[0].id,
    defensive_move1: props.defensive_moves[0].id,
    defensive_move2: props.defensive_moves[0].id,
    defensive_move3: props.defensive_moves[0].id,
    defensive_move4: props.defensive_moves[0].id,
    defensive_move5: props.defensive_moves[0].id,
    defensive_move6: props.defensive_moves[0].id,
});

const submit = () => {
    form.transform(data => ({
        ...data,
    })).post(route('duels.store'));
};
</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>  Issue Challenge
                        </h1>
                            <form @submit.prevent="submit">
                                <fieldset class="border border-gray-300 p-2 rounded">
                                    <legend class="text-lg font-bold">Opponent</legend>
                                    <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" />
                                </fieldset>
                                <fieldset class="border border-gray-300 p-2 rounded">
                                    <legend class="text-lg font-bold">Offensive Moves</legend>
                                    <InputLabel for="offensive_move1" value="1st Offensive Move" />
                                    <select v-model="form.offensive_move1" id="offensive_move1" class="mt-1 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                        <option v-for="move in offensive_moves" :key="move.id" :value="move.id">
                                            {{ move.name }}
                                        </option>
                                    </select>
                                    <InputError :message="form.errors.offensive_move1" class="mt-1" />
                                    <InputLabel for="offensive_move2" value="2nd Offensive Move" />
                                    <select v-model="form.offensive_move2" id="offensive_move2" class="mt-1 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                        <option v-for="move in offensive_moves" :key="move.id" :value="move.id">
                                            {{ move.name }}
                                        </option>
                                    </select>
                                    <InputError :message="form.errors.offensive_move2" class="mt-1" />
                                    <InputLabel for="offensive_move3" value="3rd Offensive Move" />
                                    <select v-model="form.offensive_move3" id="offensive_move3" class="mt-1 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                        <option v-for="move in offensive_moves" :key="move.id" :value="move.id">
                                            {{ move.name }}
                                        </option>
                                    </select>
                                    <InputError :message="form.errors.offensive_move3" class="mt-1" />
                                    <InputLabel for="offensive_move4" value="4th Offensive Move" />
                                    <select v-model="form.offensive_move4" id="offensive_move4" class="mt-1 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                        <option v-for="move in offensive_moves" :key="move.id" :value="move.id">
                                            {{ move.name }}
                                        </option>
                                    </select>
                                    <InputError :message="form.errors.offensive_move4" class="mt-1" />
                                    <InputLabel for="offensive_move5" value="5th Offensive Move" />
                                    <select v-model="form.offensive_move5" id="offensive_move5" class="mt-1 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                        <option v-for="move in offensive_moves" :key="move.id" :value="move.id">
                                            {{ move.name }}
                                        </option>
                                    </select>
                                    <InputError :message="form.errors.offensive_move5" class="mt-1" />
                                    <InputLabel for="offensive_move6" value="6th Offensive Move" />
                                    <select v-model="form.offensive_move6" id="offensive_move6" class="mt-1 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                        <option v-for="move in offensive_moves" :key="move.id" :value="move.id">
                                            {{ move.name }}
                                        </option>
                                    </select>
                                    <InputError :message="form.errors.offensive_move6" class="mt-1" />
                                </fieldset>
                                <fieldset class="border border-gray-300 p-2 rounded">
                                    <legend class="text-lg font-bold">Defensive Moves</legend>
                                    <InputLabel for="defensive_move1" value="1st Defensive Move" />
                                    <select v-model="form.defensive_move1" id="defensive_move1" class="mt-1 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                        <option v-for="move in defensive_moves" :key="move.id" :value="move.id">
                                            {{ move.name }}
                                        </option>
                                    </select>
                                    <InputError :message="form.errors.defensive_move1" class="mt-1" />
                                    <InputLabel for="defensive_move2" value="2nd Defensive Move" />
                                    <select v-model="form.defensive_move2" id="defensive_move2" class="mt-1 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                        <option v-for="move in defensive_moves" :key="move.id" :value="move.id">
                                            {{ move.name }}
                                        </option>
                                    </select>
                                    <InputError :message="form.errors.defenseive_move2" class="mt-1" />
                                    <InputLabel for="defensive_move3" value="3rd Defensive Move" />
                                    <select v-model="form.defensive_move3" id="defensive_move3" class="mt-1 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                        <option v-for="move in defensive_moves" :key="move.id" :value="move.id">
                                            {{ move.name }}
                                        </option>
                                    </select>
                                    <InputError :message="form.errors.defensive_move3" class="mt-1" />
                                    <InputLabel for="defensive_move4" value="4th Defensive Move" />
                                    <select v-model="form.defensive_move4" id="defensive_move4" class="mt-1 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                        <option v-for="move in defensive_moves" :key="move.id" :value="move.id">
                                            {{ move.name }}
                                        </option>
                                    </select>
                                    <InputError :message="form.errors.defensive_move4" class="mt-1" />
                                    <InputLabel for="defensive_move5" value="5th Defensive Move" />
                                    <select v-model="form.defensive_move5" id="defensive_move5" class="mt-1 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                        <option v-for="move in defensive_moves" :key="move.id" :value="move.id">
                                            {{ move.name }}
                                        </option>
                                    </select>
                                    <InputError :message="form.errors.defensive_move5" class="mt-1" />
                                    <InputLabel for="defensive_move6" value="6th Defensive Move" />
                                    <select v-model="form.defensive_move6" id="defensive_move6" class="mt-1 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                        <option v-for="move in defensive_moves" :key="move.id" :value="move.id">
                                            {{ move.name }}
                                        </option>
                                    </select>
                                    <InputError :message="form.errors.defensive_move6" class="mt-1" />
                                </fieldset>
                                <PrimaryButton class="ms-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
                                    Submit
                                </PrimaryButton>
                            </form>
                        </container>
                    </div>
                </div>
            </div>
    </AppLayout>
</template>

Here is what I came up with for (resources/js/Pages/duels/create.vue):

<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 {useForm} from "@inertiajs/vue3";
import PrimaryButton from "@/Components/PrimaryButton.vue";
import OffensiveMovesFieldset from "@/Pages/Duels/Partials/OffensiveMovesFieldset.vue";

const props = defineProps(['defensive_moves']);

const form = useForm({
    opponent: '',
    defensive_move1: props.defensive_moves[0].id,
    defensive_move2: props.defensive_moves[0].id,
    defensive_move3: props.defensive_moves[0].id,
    defensive_move4: props.defensive_moves[0].id,
    defensive_move5: props.defensive_moves[0].id,
    defensive_move6: props.defensive_moves[0].id,
});

const submit = () => {
    form.transform(data => ({
        ...data,
    })).post(route('duels.store'));
};
</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>  Issue Challenge
                        </h1>
                            <form @submit.prevent="submit">
                                <fieldset class="border border-gray-300 p-2 rounded">
                                    <legend class="text-lg font-bold">Opponent</legend>
                                    <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" />
                                </fieldset>
                                <OffensiveMovesFieldset />
                                <fieldset class="border border-gray-300 p-2 rounded">
                                    <legend class="text-lg font-bold">Defensive Moves</legend>
                                    <InputLabel for="defensive_move1" value="1st Defensive Move" />
                                    <select v-model="form.defensive_move1" id="defensive_move1" class="mt-1 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                        <option v-for="move in defensive_moves" :key="move.id" :value="move.id">
                                            {{ move.name }}
                                        </option>
                                    </select>
                                    <InputError :message="form.errors.defensive_move1" class="mt-1" />
                                    <InputLabel for="defensive_move2" value="2nd Defensive Move" />
                                    <select v-model="form.defensive_move2" id="defensive_move2" class="mt-1 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                        <option v-for="move in defensive_moves" :key="move.id" :value="move.id">
                                            {{ move.name }}
                                        </option>
                                    </select>
                                    <InputError :message="form.errors.defenseive_move2" class="mt-1" />
                                    <InputLabel for="defensive_move3" value="3rd Defensive Move" />
                                    <select v-model="form.defensive_move3" id="defensive_move3" class="mt-1 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                        <option v-for="move in defensive_moves" :key="move.id" :value="move.id">
                                            {{ move.name }}
                                        </option>
                                    </select>
                                    <InputError :message="form.errors.defensive_move3" class="mt-1" />
                                    <InputLabel for="defensive_move4" value="4th Defensive Move" />
                                    <select v-model="form.defensive_move4" id="defensive_move4" class="mt-1 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                        <option v-for="move in defensive_moves" :key="move.id" :value="move.id">
                                            {{ move.name }}
                                        </option>
                                    </select>
                                    <InputError :message="form.errors.defensive_move4" class="mt-1" />
                                    <InputLabel for="defensive_move5" value="5th Defensive Move" />
                                    <select v-model="form.defensive_move5" id="defensive_move5" class="mt-1 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                        <option v-for="move in defensive_moves" :key="move.id" :value="move.id">
                                            {{ move.name }}
                                        </option>
                                    </select>
                                    <InputError :message="form.errors.defensive_move5" class="mt-1" />
                                    <InputLabel for="defensive_move6" value="6th Defensive Move" />
                                    <select v-model="form.defensive_move6" id="defensive_move6" class="mt-1 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                        <option v-for="move in defensive_moves" :key="move.id" :value="move.id">
                                            {{ move.name }}
                                        </option>
                                    </select>
                                    <InputError :message="form.errors.defensive_move6" class="mt-1" />
                                </fieldset>
                                <PrimaryButton class="ms-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
                                    Submit
                                </PrimaryButton>
                            </form>
                        </container>
                    </div>
                </div>
            </div>
    </AppLayout>
</template>

And I refactored the offensive fieldsets into a partial((resources/js/Pages/duels/Partials/OffensiveMovesFieldsets.vue) which I intend to do the same for the defensive moves:

<script setup>
import InputError from "@/Components/InputError.vue";
import InputLabel from "@/Components/InputLabel.vue";
import {useForm} from "@inertiajs/vue3";

const props = defineProps(['offensive_moves']);

const form = useForm({
    offensive_move1: props.offensive_moves[0].id,
    offensive_move2: props.offensive_moves[0].id,
    offensive_move3: props.offensive_moves[0].id,
    offensive_move4: props.offensive_moves[0].id,
    offensive_move5: props.offensive_moves[0].id,
    offensive_move6: props.offensive_moves[0].id,
});
</script>
<template>
    <fieldset class="border border-gray-300 p-2 rounded">
        <legend class="text-lg font-bold">Offensive Moves</legend>
        <InputLabel for="offensive_move1" value="1st Offensive Move" />
        <select v-model="form.offensive_move1" id="offensive_move1" class="mt-1 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
            <option v-for="move in offensive_moves" :key="move.id" :value="move.id">
                {{ move.name }}
            </option>
        </select>
        <InputError :message="form.errors.offensive_move1" class="mt-1" />
        <InputLabel for="offensive_move2" value="2nd Offensive Move" />
        <select v-model="form.offensive_move2" id="offensive_move2" class="mt-1 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
            <option v-for="move in offensive_moves" :key="move.id" :value="move.id">
                {{ move.name }}
            </option>
        </select>
        <InputError :message="form.errors.offensive_move2" class="mt-1" />
        <InputLabel for="offensive_move3" value="3rd Offensive Move" />
        <select v-model="form.offensive_move3" id="offensive_move3" class="mt-1 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
            <option v-for="move in offensive_moves" :key="move.id" :value="move.id">
                {{ move.name }}
            </option>
        </select>
        <InputError :message="form.errors.offensive_move3" class="mt-1" />
        <InputLabel for="offensive_move4" value="4th Offensive Move" />
        <select v-model="form.offensive_move4" id="offensive_move4" class="mt-1 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
            <option v-for="move in offensive_moves" :key="move.id" :value="move.id">
                {{ move.name }}
            </option>
        </select>
        <InputError :message="form.errors.offensive_move4" class="mt-1" />
        <InputLabel for="offensive_move5" value="5th Offensive Move" />
        <select v-model="form.offensive_move5" id="offensive_move5" class="mt-1 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
            <option v-for="move in offensive_moves" :key="move.id" :value="move.id">
                {{ move.name }}
            </option>
        </select>
        <InputError :message="form.errors.offensive_move5" class="mt-1" />
        <InputLabel for="offensive_move6" value="6th Offensive Move" />
        <select v-model="form.offensive_move6" id="offensive_move6" class="mt-1 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
            <option v-for="move in offensive_moves" :key="move.id" :value="move.id">
                {{ move.name }}
            </option>
        </select>
        <InputError :message="form.errors.offensive_move6" class="mt-1" />
    </fieldset>
</template>

However when I try to access the page now I get the following error and the fields don't appear:

TypeError: m.offensive_moves is undefined
    setup http://ookma-kyi-core.test/build/assets/OffensiveMovesFieldset-8fce209d.js:1
    ur http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    Ly http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    Ny http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    oe http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    z http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    v http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    V http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    P http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    L http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    v http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    V http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    D http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    v http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    V http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    P http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    L http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    v http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    j http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    run http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:14
    update http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    W http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    oe http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    z http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    v http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    V http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    P http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    L http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    v http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    V http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    P http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    L http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    v http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    V http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    P http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    L http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    v http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    V http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    D http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    v http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    V http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    P http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    L http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    v http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    V http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    P http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    L http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    v http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    V http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    P http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    L http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    v http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    j http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    run http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:14
    update http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    W http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    oe http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    z http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    v http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    j http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    run http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:14
    update http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    W http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    oe http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    z http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    v http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    j http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    run http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:14
    update http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    W http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    oe http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    z http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    v http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    j http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    run http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:14
    update http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    W http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    oe http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    z http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    v http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    gr http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    mount http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:18
    mount http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:22
    setup http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:101
    h http://ookma-kyi-core.test/build/assets/app-f61f20c7.js:97
app-f61f20c7.js:18:604

I tried to get help from Lary "QuickDraw" AI but, he kept crashing for some reason... Can anyone please help?

LaryAI

1 year ago

Level 58

The error you're encountering, TypeError: m.offensive_moves is undefined, suggests that the offensive_moves prop is not being passed correctly to the OffensiveMovesFieldset component. Here are a few steps to troubleshoot and resolve the issue:

Ensure Prop is Passed Correctly: Make sure that the offensive_moves prop is being passed from the parent component (create.vue) to the OffensiveMovesFieldset component. In your create.vue file, you should have something like this:
```
<OffensiveMovesFieldset :offensive_moves="props.offensive_moves" />
```
Ensure that props.offensive_moves is correctly defined and available in the parent component.

Check Prop Definition in Child Component: In your OffensiveMovesFieldset.vue, ensure that the offensive_moves prop is defined correctly:

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
    offensive_moves: {
        type: Array,
        required: true
    }
});
</script>

Verify Data Availability: Ensure that the offensive_moves data is available and correctly populated before the component is rendered. You can add a check in the parent component to ensure that offensive_moves is not undefined or empty before rendering the OffensiveMovesFieldset component.

Debugging: Add some console logs to check the data being passed:

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
    offensive_moves: {
        type: Array,
        required: true
    }
});

console.log('Offensive Moves:', props.offensive_moves);
</script>

This will help you verify if the data is being passed correctly.

Check Parent Component: Ensure that the parent component (create.vue) is receiving the offensive_moves prop correctly from wherever it is being provided (e.g., from a server response or a parent component).

By following these steps, you should be able to identify and fix the issue with the offensive_moves prop not being passed correctly to the OffensiveMovesFieldset component. If the problem persists, double-check the data flow and ensure that all components are correctly set up to pass and receive props.

Ookma-Kyi

1 year ago

Level 1

Sorry @laryai I tried what you suggested, and it still doesn't work. I tried using console.log to debug and it doesn't appear in my Firefox web developer tools console at all. Based on this I have determined that the child values are not being passed to the parent:

Duels/Partials/OffensiveMovesFieldset.vue

<script setup>
import InputError from "@/Components/InputError.vue";
import InputLabel from "@/Components/InputLabel.vue";
import {useForm} from "@inertiajs/vue3";

const props = defineProps(['offensive_moves']);

const form = useForm({
    offensive_moves: {
        offensive_move1: props.offensive_moves[0].id,
        offensive_move2: props.offensive_moves[0].id,
        offensive_move3: props.offensive_moves[0].id,
        offensive_move4: props.offensive_moves[0].id,
        offensive_move5: props.offensive_moves[0].id,
        offensive_move6: props.offensive_moves[0].id,
    }
});

const emitSelection = () => {
    this.$emit('selection-changed', this.offensive_moves);
}
</script>
<template>
    <fieldset class="border border-gray-300 p-2 rounded">
        <legend class="text-lg font-bold">Offensive Moves</legend>
        <InputLabel for="offensive_move1" value="1st Offensive Move" />
        <select v-model="form.offensive_move1" @change="emitSelection" id="offensive_move1" class="mt-1 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
            <option v-for="move in offensive_moves" :key="move.id" :value="move.id">
                {{ move.name }}
            </option>
        </select>
        <InputError :message="form.errors.offensive_move1" class="mt-1" />
        <InputLabel for="offensive_move2" value="2nd Offensive Move" />
        <select v-model="form.offensive_move2" @change="emitSelection" id="offensive_move2" class="mt-1 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
            <option v-for="move in offensive_moves" :key="move.id" :value="move.id">
                {{ move.name }}
            </option>
        </select>
        <InputError :message="form.errors.offensive_move2" class="mt-1" />
        <InputLabel for="offensive_move3" value="3rd Offensive Move" />
        <select v-model="form.offensive_move3" @change="emitSelection" id="offensive_move3" class="mt-1 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
            <option v-for="move in offensive_moves" :key="move.id" :value="move.id">
                {{ move.name }}
            </option>
        </select>
        <InputError :message="form.errors.offensive_move3" class="mt-1" />
        <InputLabel for="offensive_move4" value="4th Offensive Move" />
        <select v-model="form.offensive_move4" @change="emitSelection" id="offensive_move4" class="mt-1 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
            <option v-for="move in offensive_moves" :key="move.id" :value="move.id">
                {{ move.name }}
            </option>
        </select>
        <InputError :message="form.errors.offensive_move4" class="mt-1" />
        <InputLabel for="offensive_move5" value="5th Offensive Move" />
        <select v-model="form.offensive_move5" @change="emitSelection" id="offensive_move5" class="mt-1 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
            <option v-for="move in offensive_moves" :key="move.id" :value="move.id">
                {{ move.name }}
            </option>
        </select>
        <InputError :message="form.errors.offensive_move5" class="mt-1" />
        <InputLabel for="offensive_move6" value="6th Offensive Move" />
        <select v-model="form.offensive_move6" @change="emitSelection" id="offensive_move6" class="mt-1 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
            <option v-for="move in offensive_moves" :key="move.id" :value="move.id">
                {{ move.name }}
            </option>
        </select>
        <InputError :message="form.errors.offensive_move6" class="mt-1" />
    </fieldset>
</template>

Duels/Ceate.vue

<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 {useForm} from "@inertiajs/vue3";
import PrimaryButton from "@/Components/PrimaryButton.vue";
import OffensiveMovesFieldset from "@/Pages/Duels/Partials/OffensiveMovesFieldset.vue";

const props = defineProps(['offensive_moves', 'defensive_moves']);

const form = useForm({
    opponent: '',
    offensive_move1: number,
    offensive_move2: number,
    offensive_move3: number,
    offensive_move4: number,
    offensive_move5: number,
    offensive_move6: number,
    defensive_move1: props.defensive_moves[0].id,
    defensive_move2: props.defensive_moves[0].id,
    defensive_move3: props.defensive_moves[0].id,
    defensive_move4: props.defensive_moves[0].id,
    defensive_move5: props.defensive_moves[0].id,
    defensive_move6: props.defensive_moves[0].id,
});

const submit = () => {
    form.transform(data => ({
        ...data,
    })).post(route('duels.store'));
};

const handleSelectionChange = (offensive_moves) => {
    console.log("Offensive Move 1" . offensive_moves.offensive_move1);
    form.offensive_move1 = offensive_moves.offensive_move1
    form.offensive_move2 = offensive_moves.offensive_move2
    form.offensive_move3 = offensive_moves.offensive_move3
    form.offensive_move4 = offensive_moves.offensive_move4
    form.offensive_move5 = offensive_moves.offensive_move5
    form.offensive_move6 = offensive_moves.offensive_move6
}
</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>  Issue Challenge
                        </h1>
                            <form @submit.prevent="submit">
                                <fieldset class="border border-gray-300 p-2 rounded">
                                    <legend class="text-lg font-bold">Opponent</legend>
                                    <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" />
                                </fieldset>
                                <OffensiveMovesFieldset @sinput="handleSelectionChange" :offensive_moves="props.offensive_moves" />
                                <fieldset class="border border-gray-300 p-2 rounded">
                                    <legend class="text-lg font-bold">Defensive Moves</legend>
                                    <InputLabel for="defensive_move1" value="1st Defensive Move" />
                                    <select v-model="form.defensive_move1" id="defensive_move1" class="mt-1 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                        <option v-for="move in defensive_moves" :key="move.id" :value="move.id">
                                            {{ move.name }}
                                        </option>
                                    </select>
                                    <InputError :message="form.errors.defensive_move1" class="mt-1" />
                                    <InputLabel for="defensive_move2" value="2nd Defensive Move" />
                                    <select v-model="form.defensive_move2" id="defensive_move2" class="mt-1 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                        <option v-for="move in defensive_moves" :key="move.id" :value="move.id">
                                            {{ move.name }}
                                        </option>
                                    </select>
                                    <InputError :message="form.errors.defenseive_move2" class="mt-1" />
                                    <InputLabel for="defensive_move3" value="3rd Defensive Move" />
                                    <select v-model="form.defensive_move3" id="defensive_move3" class="mt-1 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                        <option v-for="move in defensive_moves" :key="move.id" :value="move.id">
                                            {{ move.name }}
                                        </option>
                                    </select>
                                    <InputError :message="form.errors.defensive_move3" class="mt-1" />
                                    <InputLabel for="defensive_move4" value="4th Defensive Move" />
                                    <select v-model="form.defensive_move4" id="defensive_move4" class="mt-1 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                        <option v-for="move in defensive_moves" :key="move.id" :value="move.id">
                                            {{ move.name }}
                                        </option>
                                    </select>
                                    <InputError :message="form.errors.defensive_move4" class="mt-1" />
                                    <InputLabel for="defensive_move5" value="5th Defensive Move" />
                                    <select v-model="form.defensive_move5" id="defensive_move5" class="mt-1 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                        <option v-for="move in defensive_moves" :key="move.id" :value="move.id">
                                            {{ move.name }}
                                        </option>
                                    </select>
                                    <InputError :message="form.errors.defensive_move5" class="mt-1" />
                                    <InputLabel for="defensive_move6" value="6th Defensive Move" />
                                    <select v-model="form.defensive_move6" id="defensive_move6" class="mt-1 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                        <option v-for="move in defensive_moves" :key="move.id" :value="move.id">
                                            {{ move.name }}
                                        </option>
                                    </select>
                                    <InputError :message="form.errors.defensive_move6" class="mt-1" />
                                </fieldset>
                                <PrimaryButton class="ms-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
                                    Submit
                                </PrimaryButton>
                            </form>
                        </container>
                    </div>
                </div>
            </div>
    </AppLayout>
</template>

Any ideas?

Please or to participate in this conversation.