Laravel why record is not updating using vuejs

Question

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.

try $todo->update(['text'=>$request->text]); instead of $todo->update($request->all()); — John Lobo
– John Lobo, Commented Nov 25, 2021 at 9:54
remove fillable property protected $fillable = ['id']; and add protected $guarded=['id']; — John Lobo
– John Lobo, Commented Nov 25, 2021 at 10:06

John Lobo · Accepted Answer · 2021-11-25 10:14:57Z

2

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

So

 protected $guarded=['id'];

or

protected $fillable=['text'];

edited Nov 25, 2021 at 10:14

answered Nov 25, 2021 at 10:12

John Lobo

15.4k2 gold badges18 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

cam · Accepted Answer · 2021-11-25 09:43:56Z

2

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.

edited Nov 25, 2021 at 9:43

answered Nov 25, 2021 at 9:33

cam

3,7301 gold badge16 silver badges20 bronze badges

5 Comments

Fayakon Over a year ago

added snippet under

cam Over a year ago

Ok that's not any help. You'll need to check your Laravel logs too.

cam Over a year ago

Now the data is not updating - this means that your getTodos() functions likely isnt working properly. If you console log the response data from getTodos does it contain your updated todo?

Fayakon Over a year ago

i can't see updated data in sql aswell

cam Over a year ago

There must be something wrong with your ` $todo->update` statement.

Collectives™ on Stack Overflow

Laravel why record is not updating using vuejs

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related