Vue/Inertia.js not updating value in database

Question

I have the below form:

<form @change="updatePipeline">
  <select v-model="pipeline.input_mode">
     <option value="text">Text</option>
     <option value="html">HTML</option>
     <option value="json">JSON</option>
  </select>
</form>

The @change is calling the below:

<script setup>
import {useForm} from "@inertiajs/inertia-vue3";
const props = defineProps({
    pipeline: {
        type: Object,
        required: true,
    },
});

const form = useForm({
    input_mode: props.pipeline.input_mode,
});

const updatePipeline = () => {
    form.put(route('pipelines.update', props.pipeline), {
        errorBag: 'updatePipeline',
        preserveScroll: true,
    });
};

The value is not updated in the database:

public function update(Request $request, Pipeline $pipeline)
{
    $pipeline->update(
        $request->validate([
            'input_mode' => 'required|string|min:3|max:255',
        ])
    );


    return redirect()
        ->route('pipelines.edit', ['pipeline' => $pipeline])
        ->with('success', 'Pipeline edited successfully.');
}

What am I doing wrong?

Answer 1

PAY ATTENTION TO THE FIRST COMMENT ON THIS ANSWER. IT DEPENDS ON THE VERSION

I'm not an expert in inertia but when you do

$pipeline->update(
        $request->validate([
            'input_mode' => 'required|string|min:3|max:255',
        ])
    );

it returns a void as you can see here https://laravel.com/api/5.5/Illuminate/Validation/Validator.html#method_validate

What you are looking for is:

$request->validate(['input_mode' => 'required|string|min:3|max:255'])

$pipeline->update($request->validated());

validated() will return an array of items that were validated.

---

EDIT

Do you have the input_mode in the $fillables in your modal Pipeline ? If not, that's your problem

protected $fillables = ['input_mode'];

Answer 2

So I actually figured this out shortly after asking the question here. The reason why the database is not being persisted, is that I am referring pipeline on the v-model property. Instead, I should refer to form :

<form @change="updatePipeline">
  <select v-model="form.input_mode">
     <option value="text">Text</option>
     <option value="html">HTML</option>
     <option value="json">JSON</option>
  </select>
</form>

So, instead of having: v-model="pipeline.input_mode" , I have: v-model="form.input_mode" .