[Vue 警告]：渲染错误：“TypeError：无法读取未定义的属性 'id'”答案

【问题标题】：[Vue warn]: Error in render: "TypeError: Cannot read property 'id' of undefined"[Vue 警告]：渲染错误：“TypeError：无法读取未定义的属性 'id'”
【发布时间】：2018-07-14 13:15:33
【问题描述】：

我正在使用 Laravel 和 VueJS 构建我的 CRUD。当我提交创建表单时，我收到此消息错误：[Vue warn]: Error in render: "TypeError: Cannot read property 'id' of undefined"

这里，我的 createUser 方法：

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;
                });
        },
    }
}

在这里，我显示数据库中的所有用户时的表格。显示用户正常工作。

<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>

我的 Laravel 用户模型在这里：

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',
    ];
}

最后，我的 UserController 方法：

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);
}

【问题讨论】：

this.readUsers();这个方法在哪里定义的？
对不起，我坚持我已经写了。使用该方法更新帖子。
发布用户模型和控制器方法或在获取用户axios.get('user') .then(response => { this.users = response.data.users; console.log(this.users); }); 打开浏览器控制台并告诉我你在那里得到什么后做一个控制台日志
axios.get('user') 将其更改为 axios.get('/user')（可能是用户？）
@LeoinstanceofKelmendi 我已经用模型和控制器编辑了我的帖子。

标签： laravel vue.js

【解决方案1】：

create() 方法返回模型。所以你需要稍微改造一下用户集合，

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);
}

【讨论】：