[Vue warn]: Error in render: “TypeError: Cannot read property 'id' of undefined”

Question

I'm building my CRUD with Laravel & VueJS. When I submit the creation form, I'm getting this message error : [Vue warn]: Error in render: "TypeError: Cannot read property 'id' of undefined"

Here, my createUser method :

export default {
    data(){
        return {
            user: {
              firstname: '',
              lastname: '',
              email: '',
              password: ''
            },
            errors: [],
            users: [],
            update_user: {}
        }
    },
    mounted(){
        this.readUsers();
    },
    methods: {
        createUser(){
            axios.post('user', {
                firstname: this.user.firstname,
                lastname: this.user.lastname,
                email: this.user.email,
                password: this.user.password
            }).then(response => {
                this.reset();
                if (response.data.message == "Error"){
                  this.errors.push("L'utilisateur que vous tentez d'ajouter existe déjà!")
                }else{
                  this.users.push(response.data.user);
                }
            })
        },
        readUsers(){
            axios.get('user')
                .then(response => {
                    this.users = response.data.users;
                });
        },
    }
}

And here, the table when I display all users from DB. Display users works correctly.

<table class="table table-bordered table-striped table-responsive" v-if="users.length > 0">
  <tbody>
  <tr>
      <th>#</th>
      <th>Nom</th>
      <th>Prénom</th>
      <th>Adresse e-mail</th>
      <th>Action</th>
  </tr>
  <tr v-for="(user, index) in users">
      <td>{{ user.id }}</td>
      <td>{{ user.lastname }}</td>
      <td>{{ user.firstname }}</td>
      <td>{{ user.email }}</td>
      <td>
          <button @click="initUpdate(index)" class="btn btn-success btn-xs">Éditer</button>
          <button @click="deleteUser(index)" class="btn btn-danger btn-xs">Supprimer</button>
      </td>
  </tr>
  </tbody>
</table>

My User model from Laravel here :

namespace App;

use Illuminate\Notifications\Notifiable;
use Illuminate\Foundation\Auth\User as Authenticatable;

class User extends Authenticatable
{
    use Notifiable;

    protected $fillable = [
        'id',
        'firstname',
        'lastname',
        'email',
        'password'
    ];

    protected $hidden = [
        'password', 'remember_token',
    ];
}

And for the finish, my UserController method :

public function store(Request $request)
{
    $this->validate($request, [
        'firstname' => 'required',
        'lastname' => 'required',
        'email' => 'required',
        'password' => 'required'
    ]);

    $user = User::create([
        'firstname'     => request('firstname'),
        'lastname'      => request('lastname'),
        'email'         => request('email'),
        'password'      => Hash::make(request('password'))
    ]);

    return response()->json([
        'user'    => $user,
        'message' => 'Success'
    ], 200);
}

Answer 1

The create() method returns the model. So you need to transform user collection a bit,

public function store(Request $request)
{
    $this->validate($request, [
        'firstname' => 'required',
        'lastname' => 'required',
        'email' => 'required',
        'password' => 'required'
    ]);

    $user = User::create([
        'firstname'     => request('firstname'),
        'lastname'      => request('lastname'),
        'email'         => request('email'),
        'password'      => Hash::make(request('password'))
    ]);

    return response()->json([

        'user'    => [
          'id'=>$user->id, 
          'firstname'=>$user->firstname,
          'lastname'=>$user->lastname,
          'email'=>$user->email
        ],

        'message' => 'Success'

    ], 200);
}