Inertiajs and edit forms

Level 6

@tykus Thanks for your response tykus. I tried that but when I type into the form field, it always reverts to the orginal value. Let me try it again.

tykus

4 years ago

Level 104

@dannyyounes can you share your component code?

dannyyounes

4 years ago

Level 6

@tykus

<Head>
    <title>Edit Income</title>
</Head>
<h1 class="text-3xl">Edit Income</h1>

<form @submit.prevent="submit" id="income" class="max-w-md mx-auto mt-8">
    <div class="mb-6">
        <BaseSelect
            name="interval"
            v-model="form.interval"
            :selectedValue="income.interval"
            @change="showOption"
            id="interval"
            :options="this.options"
            label="Interval" />

    </div>
    <div class="mb-6" v-if="showDayPicker">
        <BaseDayPicker
            name="day_of_week"
            v-model="form.day_of_week"
            :selectedValue="income.day_of_week"
            id="day_of_week"
            label="Select the Day of Week you get paid" />
    </div>

    <div class="mb-6" v-if="showDayOfMonthPicker">
        <BaseDateOfMonthPicker
            name="date_of_month"
            v-model="form.date_of_month"
            :selectedValue="income.date_of_month"
            id="date_of_month"
            label="Select the Date of Month you get paid" />
    </div>

    <div class="mb-6" v-if="showDatePicker">
        <BaseInput
            name="date_paid"
            v-model="form.date_paid"
            :value="income.date_paid"
            type="date"
            id="date_paid"
            label="Select the date you got paid" />
    </div>

    <div class="mb-6">
        <BaseInput
            name="company"
            v-model="form.company"
            :value="income.company"
            type="text"
            id="company"
            label="Company"
            :error="form.errors.company" />
    </div>
    <div class="mb-6">
        <BaseInput
            name="amount"
            v-model="form.amount"
            :value="income.amount"
            type="number"
            id="amount"
            label="Amount"
            :error="form.errors.amount" />
    </div>

    <div class="mb-6">
        <Button type="submit">Submit</Button>
    </div>
</form>

import BaseInput from "../../Shared/Components/BaseInput"; import BaseSelect from "../../Shared/Components/BaseSelect"; import BaseDateSelector from "../../Shared/Components/BaseDateSelector"; import Button from "../../Shared/Button"; import IncomeGlobal from "../../Mixins/income"; export default { name: "IncomeEdit", mixins: [IncomeGlobal], components: { BaseSelect, BaseInput, Button, BaseDateSelector }, data() { return { options: ['Weekly', 'Fortnightly', 'Monthly', 'One-Off'], showDayPicker: !!this.income.day_of_week, showDayOfMonthPicker: !!this.income.date_of_month, showDatePicker: this.income.interval === "One-Off", date_paid: this.income.date_paid } } }; import {useForm} from '@inertiajs/inertia-vue3'; import BaseDayPicker from "../../Shared/Components/BaseDayPicker"; import BaseDateOfMonthPicker from "../../Shared/Components/BaseDateOfMonthPicker"; const props = defineProps({ income: Object }) let form = useForm({ day_of_week: props.income.day_of_week, date_of_month: props.income.date_of_month, company: props.income.company, amount: props.income.amount, interval: props.income.interval, date_paid: props.income.date_paid }); let submit = () => { form.put('/income/'+props.income.id); };

tykus

4 years ago

Level 104

@dannyyounes Why do you have v-model and value attributes on the form inputs? They don't really need name attribute either!

dannyyounes

4 years ago

Best Answer

Level 6

@tykus The issue was in my BaseInput component, the value was not being set. I did pass it in as an attribute, but for some reason didn't allow it to operate correctly