I'm pretty new to this and it seems there are so many pages and teachers that make the Edit function its own page, but I want to do it on the same page so the user can just edit it while seeing everything else. This is my code:

Route::resource('/finances', FinancesController::class)
    ->only(['index', 'store', 'update']);

Controller:

    public function index()
    {
        return inertia(
            'Finances/FinancesMain',
            [
                'incomes' => Income::all()
            ]
        );
    }

    public function store(Request $request)
    {
        Income::create($request->all());
        return redirect()->route('finances.index');
    }
    
    public function update(Request $request, Income $income)
    {
        $income->update(
            $request->validate([
                'description' => 'required',
                'amount' => 'required',
                'day_deposited' => 'required',
            ])
        );
        return redirect()->route('finances.index');
    } 
}

The vue pages: FinancesMain.vue:

    <template>
        <Income :incomes="$page.props.incomes"/>
        <Expenses />
    </template>

    <script setup>
    import Income from './Income.vue'
    import Expenses from './Expenses.vue'
    defineProps({
      incomes: Array,
    })
    </script>

Income.vue:

<template>
  <div v-for="income in incomes" :key="income.id">
    <Edit :income="income" />
  </div>

  <form @submit.prevent="create">
      <div>
        <div>
          <label>Description</label>
          <input type="text" v-model="form.description"/>
        </div>
        <div>
          <label>Amount</label>
          <input type="text" v-model.number="form.amount"/>
        </div>
        <div>
          <label>Day deposited (day of the month)</label>
          <input type="text" v-model="form.day_deposited" />
        </div>
        <div>
          <button type="submit"><b>Create</b></button>
        </div>
      </div>
    </form>
</template>

<script setup>
import { useForm } from '@inertiajs/vue3'
import Edit from './Edit.vue'
defineProps({
  incomes: Array
})
const form = useForm({
    description: null,
    amount: null,
    day_deposited: null
})
const create = () => {
  form.post('/finances');
  form.description = "";
  form.amount = null;
  form.day_deposited = null;
  }
</script>

Edit.vue:

<template>
  <form @submit.prevent="update">
    <div>
        <input v-model.number="form.description" type="text" />
        <input v-model.number="form.amount" type="text" />
        <input v-model.number="form.day_deposited" type="text" />
      </div>

      <div>
        <button type="submit">Edit</button>
      </div>
  </form>
</template>

<script setup>
import { useForm } from '@inertiajs/vue3'

const props = defineProps({
  income: Object,
})
const form = useForm({
  description: props.income.description,
  amount: props.income.amount,
  day_deposited: props.income.day_deposited,
})
const update = () => {
    console.log("hi");
    form.put(`/finances/${props.income.id}`)
}
</script>

The create function works, and the console.log works when I click "Edit", but the database doesn't update and there are no errors.

I'm pretty new to this and it seems there are so many pages and teachers that make the Edit function its own page, but I want to do it on the same page so the user can just edit it while seeing everything else. This is my code:

Route::resource('/finances', FinancesController::class)
    ->only(['index', 'store', 'update']);

Controller:

    public function index()
    {
        return inertia(
            'Finances/FinancesMain',
            [
                'incomes' => Income::all()
            ]
        );
    }

    public function store(Request $request)
    {
        Income::create($request->all());
        return redirect()->route('finances.index');
    }
    
    public function update(Request $request, Income $income)
    {
        $income->update(
            $request->validate([
                'description' => 'required',
                'amount' => 'required',
                'day_deposited' => 'required',
            ])
        );
        return redirect()->route('finances.index');
    } 
}

The vue pages: FinancesMain.vue:

    <template>
        <Income :incomes="$page.props.incomes"/>
        <Expenses />
    </template>

    <script setup>
    import Income from './Income.vue'
    import Expenses from './Expenses.vue'
    defineProps({
      incomes: Array,
    })
    </script>

Income.vue:

<template>
  <div v-for="income in incomes" :key="income.id">
    <Edit :income="income" />
  </div>

  <form @submit.prevent="create">
      <div>
        <div>
          <label>Description</label>
          <input type="text" v-model="form.description"/>
        </div>
        <div>
          <label>Amount</label>
          <input type="text" v-model.number="form.amount"/>
        </div>
        <div>
          <label>Day deposited (day of the month)</label>
          <input type="text" v-model="form.day_deposited" />
        </div>
        <div>
          <button type="submit"><b>Create</b></button>
        </div>
      </div>
    </form>
</template>

<script setup>
import { useForm } from '@inertiajs/vue3'
import Edit from './Edit.vue'
defineProps({
  incomes: Array
})
const form = useForm({
    description: null,
    amount: null,
    day_deposited: null
})
const create = () => {
  form.post('/finances');
  form.description = "";
  form.amount = null;
  form.day_deposited = null;
  }
</script>

Edit.vue:

<template>
  <form @submit.prevent="update">
    <div>
        <input v-model.number="form.description" type="text" />
        <input v-model.number="form.amount" type="text" />
        <input v-model.number="form.day_deposited" type="text" />
      </div>

      <div>
        <button type="submit">Edit</button>
      </div>
  </form>
</template>

<script setup>
import { useForm } from '@inertiajs/vue3'

const props = defineProps({
  income: Object,
})
const form = useForm({
  description: props.income.description,
  amount: props.income.amount,
  day_deposited: props.income.day_deposited,
})
const update = () => {
    console.log("hi");
    form.put(`/finances/${props.income.id}`)
}
</script>

The create function works, and the console.log works when I click "Edit", but the database doesn't update and there are no errors.

• vue.js
• crud
• inertiajs
• laravel-11

• It looks like your description and day_deposited are using v-model.number in your Edit form, but not in the create form. Not sure if that has an effect. Also, have you checked the "Payload" values and URL path in the Dev Tools when you click "Edit"? Just to make sure your API is getting the correct information. – Magnie Mozios Commented Nov 19, 2024 at 22:57
• Good call on the v-model.number, but when I took out .number it still didn't work. That could definitely cause a problem. Where do I see "Payload" and URL path in Dev Tools? – Marianne Hartigan Commented Nov 19, 2024 at 23:31
• I found the information you spoke of in the Network tab. It does not have the updated data (it has the old data) but it does have the correct url I believe. – Marianne Hartigan Commented Nov 19, 2024 at 23:50
• That would imply form.put() isn't sending the correct information. Next troubleshooting step I would suggest then is console.log(form) in your update() function and check its contents. You could also put {{ form.description }} somewhere in your template and just type in the fields to see if it updates. That is really bizarre that it isn't just updating. Probably something obvious, yet hard to see.. Maybe also try setting the form values to null and then try updating. Maybe the props are being weird. – Magnie Mozios Commented Nov 20, 2024 at 15:24

1 Answer 1

I didn't change anything except the first part of Income.vue. Now it will both update and create on the same page.

  <Edit v-for="income in incomes" :key="income.id" :income="income"/>