Laravel why record is not updating using vuejs-CodePudding

i am trying to update text when i send request to Laravel controller, but i am getting error:

500 internal server error 
Uncaught (in promise) Error: Request failed with status code 500

console.log is showing text and values which i am trying to send to controller:

id:16 text:aa

vue js code:

const onEdit=(todo)=>{
    //  var src = evt.target.innerHTML
    //  this.txt = src
    axios
        .put('http://127.0.0.1:8000/api/todo/update', {
            id:todo.id,
            text:todo.text
        })
        .then(() => getTodos());

    console.log("working", todo.text, todo.id);
};

Laravel COntroller:

public function updateData(Request $request)
{
    $todo = Todo::find($request->id);
    $todo->update($request->all());

    return response()->json([
        'message' => 'updated'
    ]);
}

Route:

Route::put('todo/update',[TodoController::class,'updateData']);

Model:

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Todo extends Model
{
    use HasFactory;
    protected $dates = [
        'created_at',
        'updated_at',
        
    ];

    protected $fillable = ['id'];
}

UPDATE:

i checked laravel log and i got error:

Add [id] to fillable property to allow mass assignment on [App\Models\Todo].

Then i added id in model. now i am seeing below response in console log but it is not updating data.

CodePudding user response：

The issue is with Todo Model,where you allowed id field as fillable. Since id is auto increment filed in database .So text field should be fillable.

  protected $fillable = ['id'];

so here you have two options .One is to allow $fillable property to text field or guarding id property so all other properties are fillabe

 protected $guarded=['id'];

protected $fillable=['text'];

CodePudding user response：

A 500 error is a generic server side error.

Firstly, edit your onEdit function to add a catch so you can console log the server error.

const onEdit = (todo) => {
  axios.put('http://127.0.0.1:8000/api/todo/update', {
    id: todo.id,
    text: todo.text
  }).then(response => {
    console.log(response)
    getTodos()
  }).catch(error => {
    console.log(error)
  })
};

Once you know what the server error is then you'll know what to fix.