title: How can I post username data from one table automatically in another? VueJs + Laravel + MySQL
body: <p>I have a users table which displays the registered users in the users section from the database(sql) of my Laravel Vue app. I now have an Employees table which has a form for business information. I need to have one of the fields that exists in the database called empuser auto populated with the name from the user table when posting the empleado form. when I submit the form, I get a SQL error saying that I have no default value for the empuser field.
  I am using phpmyadmin with SQL in local development. In my case, it isn't that sql isn't working, it is that I am unsure how to make the relationships in this type of environment, ie, VueJs and Laravel. The error I am getting is <code>&quot;SQLSTATE[HY000]: General error: 1364 Field 'empuser' doesn't have a default value (SQL: insert into </code>empleados<code> (</code>emprfc<code>,</code>... etc.
  Database Migration:
  User_table:</p>
  <pre><code>public function up()
      {
          Schema::create('users', function (Blueprint $table) {
              $table-&gt;id();
              $table-&gt;string('name');
              $table-&gt;string('email')-&gt;unique();
              $table-&gt;timestamp('email_verified_at')-&gt;nullable();
              $table-&gt;string('password');
              $table-&gt;string('type')-&gt;default('user');
              $table-&gt;mediumText('bio')-&gt;nullable();
              $table-&gt;string('photo')-&gt;default('profile.png');
              $table-&gt;rememberToken();
              $table-&gt;timestamps();
          });
      }
  </code></pre>
  <p>Employee table</p>
  <pre><code>   public function up()
      {
          Schema::create('empleados', function (Blueprint $table) {
              $table-&gt;id();
  $table-&gt;string('emprfc', 20)-&gt;unique();
  $table-&gt;string('empnombre', 75);
  $table-&gt;string('empcalle', 100)-&gt;nullable();
  $table-&gt;string('empcolonia', 50)-&gt;nullable();
  $table-&gt;string('empciudad', 50);
  $table-&gt;string('empestado', 50);
  $table-&gt;string('empcpostal', 5);
  $table-&gt;string('emppais', 25);
  $table-&gt;string('empstatus', 1)-&gt;default('1');
  $table-&gt;bigInteger('empuser');
  $table-&gt;bigInteger('empregby');
  $table-&gt;timestamps();
  $table-&gt;index('empciudad');
  $table-&gt;index('empestado');
  $table-&gt;index('empcpostal');
  $table-&gt;index('emppais');
  $table-&gt;index('empuser');
  $table-&gt;index('empregby');
          });
      }
  </code></pre>
  <p>Users.vue</p>
  <pre><code>&lt;template&gt;
    &lt;div class=&quot;container-fluid&quot;&gt;
      &lt;div class=&quot;row pt-3&quot;&gt;
        &lt;div class=&quot;col-12&quot;&gt;
          &lt;div class=&quot;card&quot;&gt;
            &lt;div class=&quot;card-header&quot;&gt;
              &lt;h3 class=&quot;card-title&quot;&gt;Tablero de Usuarios&lt;/h3&gt;
  
              &lt;div class=&quot;card-tools&quot;&gt;
                &lt;!-- &lt;button class=&quot;btn btn-success&quot; data-toggle=&quot;modal&quot; data-target=&quot;#addNew&quot;&gt; --&gt;
                &lt;button class=&quot;btn btn-success&quot; @click=&quot;newModal&quot;&gt;
                  &lt;i class=&quot;fas fa-user-plus&quot;&gt;&lt;/i&gt; Añadir Nuevo
                  Usuario
                &lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;!-- /.card-header --&gt;
            &lt;div class=&quot;card-body table-responsive p-0&quot;&gt;
              &lt;table class=&quot;table table-hover text-nowrap&quot;&gt;
                &lt;thead&gt;
                  &lt;tr&gt;
                    &lt;th&gt;ID&lt;/th&gt;
                    &lt;th&gt;Nombre&lt;/th&gt;
                    &lt;th&gt;Correo&lt;/th&gt;
                    &lt;th&gt;Rol&lt;/th&gt;
                    &lt;th&gt;Registrado&lt;/th&gt;
                    &lt;th&gt;Modificar&lt;/th&gt;
                  &lt;/tr&gt;
                &lt;/thead&gt;
                &lt;tbody&gt;
                  &lt;tr v-for=&quot;user in users&quot; :key=&quot;user.id&quot;&gt;
                    &lt;td&gt;{{ user.id }}&lt;/td&gt;
                    &lt;td&gt;{{ user.name }}&lt;/td&gt;
                    &lt;td&gt;{{ user.email }}&lt;/td&gt;
                    &lt;td&gt;{{ user.type | upText }}&lt;/td&gt;
                    &lt;td&gt;{{ user.created_at | myDate }}&lt;/td&gt;
                    &lt;td&gt;
                      &lt;a class=&quot;btn btn-primary&quot; href=&quot;#&quot; @click=&quot;editModal(user)&quot;&gt;
                        &lt;i class=&quot;fas fa-edit&quot;&gt;&lt;/i&gt;
                      &lt;/a&gt;
                      &lt;a class=&quot;btn btn-danger&quot; href=&quot;#&quot; @click=&quot;deleteUser(user.id)&quot;&gt;
                        &lt;i class=&quot;fas fa-trash&quot;&gt;&lt;/i&gt;
                      &lt;/a&gt;
                    &lt;/td&gt;
                  &lt;/tr&gt;
                &lt;/tbody&gt;
              &lt;/table&gt;
            &lt;/div&gt;
            &lt;!-- /.card-body --&gt;
          &lt;/div&gt;
          &lt;!-- /.card --&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;form @submit.prevent=&quot;editmode ? updateUser() : createUser()&quot;&gt;
        &lt;!-- Modal --&gt;
        &lt;div
          class=&quot;modal fade&quot;
          id=&quot;addNew&quot;
          tabindex=&quot;-1&quot;
          aria-labelledby=&quot;exampleModalLabel&quot;
          aria-hidden=&quot;true&quot;
        &gt;
          &lt;div class=&quot;modal-dialog modal-dialog-centered&quot;&gt;
            &lt;div class=&quot;modal-content&quot;&gt;
              &lt;div class=&quot;modal-header&quot;&gt;
                &lt;h5 v-show=&quot;!editmode&quot; class=&quot;modal-title&quot; id=&quot;exampleModalLabel&quot;&gt;Añadir Nuevo&lt;/h5&gt;
                &lt;h5
                  v-show=&quot;editmode&quot;
                  class=&quot;modal-title&quot;
                  id=&quot;exampleModalLabel&quot;
                &gt;Actualizar datos de Usuario&lt;/h5&gt;
                &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-label=&quot;Close&quot;&gt;
                  &lt;span aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;/span&gt;
                &lt;/button&gt;
              &lt;/div&gt;
              &lt;div class=&quot;modal-body&quot;&gt;
                &lt;div class=&quot;form-group&quot;&gt;
                  &lt;input
                    v-model=&quot;form.name&quot;
                    type=&quot;text&quot;
                    name=&quot;name&quot;
                    placeholder=&quot;Nombre de Usuario&quot;
                    class=&quot;form-control&quot;
                    :class=&quot;{
                                          'is-invalid': form.errors.has('name')
                                      }&quot;
                  /&gt;
                  &lt;has-error :form=&quot;form&quot; field=&quot;name&quot;&gt;&lt;/has-error&gt;
                &lt;/div&gt;
  
                &lt;div class=&quot;form-group&quot;&gt;
                  &lt;input
                    v-model=&quot;form.email&quot;
                    type=&quot;email&quot;
                    name=&quot;name&quot;
                    placeholder=&quot;Correo Electrónico&quot;
                    class=&quot;form-control&quot;
                    :class=&quot;{
                                          'is-invalid': form.errors.has('email')
                                      }&quot;
                  /&gt;
                  &lt;has-error :form=&quot;form&quot; field=&quot;email&quot;&gt;&lt;/has-error&gt;
                &lt;/div&gt;
  
                &lt;div class=&quot;form-group&quot;&gt;
                  &lt;input
                    v-model=&quot;form.bio&quot;
                    type=&quot;text&quot;
                    name=&quot;bio&quot;
                    placeholder=&quot;Bio breve de Usuario (Opcional)&quot;
                    class=&quot;form-control&quot;
                    :class=&quot;{
                                          'is-invalid': form.errors.has('bio')
                                      }&quot;
                  /&gt;
                  &lt;has-error :form=&quot;form&quot; field=&quot;name&quot;&gt;&lt;/has-error&gt;
                &lt;/div&gt;
                &lt;div class=&quot;form-group&quot;&gt;
                  &lt;select
                    id=&quot;type&quot;
                    v-model=&quot;form.type&quot;
                    name=&quot;type&quot;
                    class=&quot;form-control&quot;
                    :class=&quot;{
                                          'is-invalid': form.errors.has('type')
                                      }&quot;
                  &gt;
                    &lt;option value&gt;Eliges el Rol de Usuario&lt;/option&gt;
                    &lt;option value=&quot;admin&quot;&gt;Admin&lt;/option&gt;
                    &lt;option value=&quot;user&quot;&gt;Usuario Estándar&lt;/option&gt;
                    &lt;option value=&quot;author&quot;&gt;Autor&lt;/option&gt;
                  &lt;/select&gt;
                  &lt;has-error :form=&quot;form&quot; field=&quot;name&quot;&gt;&lt;/has-error&gt;
                &lt;/div&gt;
                &lt;div class=&quot;form-group&quot;&gt;
                  &lt;input
                    v-model=&quot;form.password&quot;
                    type=&quot;password&quot;
                    name=&quot;password&quot;
                    placeholder=&quot;Contraseña&quot;
                    class=&quot;form-control&quot;
                    :class=&quot;{
                                          'is-invalid': form.errors.has(
                                              'password'
                                          )
                                      }&quot;
                  /&gt;
                  &lt;has-error :form=&quot;form&quot; field=&quot;password&quot;&gt;&lt;/has-error&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class=&quot;modal-footer&quot;&gt;
                &lt;button type=&quot;button&quot; class=&quot;btn btn-danger&quot; data-dismiss=&quot;modal&quot;&gt;Cerrar&lt;/button&gt;
                &lt;button v-show=&quot;editmode&quot; type=&quot;submit&quot; class=&quot;btn btn-success&quot;&gt;Actualizar&lt;/button&gt;
                &lt;button v-show=&quot;!editmode&quot; type=&quot;submit&quot; class=&quot;btn btn-primary&quot;&gt;Crear&lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  export default {
    data() {
      return {
        updateUser() {
          this.$Progress.start();
          this.form
            .put(&quot;api/user/&quot; + this.form.id)
            .then(() =&gt; {
              // successfull
              $(&quot;#addNew&quot;).modal(&quot;hide&quot;);
              swal.fire(&quot;Actualizó&quot;, &quot;Datos del usuario actualizados&quot;, &quot;success&quot;);
              this.$Progress.finish();
              Fire.$emit(&quot;AfterCreate&quot;);
            })
            .catch(() =&gt; {
              // Unsuccessfull
              this.$Progress.fail();
            });
        },
        editmode: true,
        users: {},
        form: new Form({
          id: &quot;&quot;,
          name: &quot;&quot;,
          email: &quot;&quot;,
          password: &quot;&quot;,
          type: &quot;&quot;,
          bio: &quot;&quot;,
          photo: &quot;&quot;,
        }),
      };
    },
    methods: {
      editModal(user) {
        this.editmode = true;
        this.form.reset();
        $(&quot;#addNew&quot;).modal(&quot;show&quot;);
        this.form.fill(user);
      },
      newModal() {
        this.editmode = false;
        this.form.reset();
        $(&quot;#addNew&quot;).modal(&quot;show&quot;);
      },
      deleteUser(id) {
        swal
          .fire({
            title: &quot;¿Estas seguro?&quot;,
            text: &quot;¡No podrás revertir esto!&quot;,
            icon: &quot;warning&quot;,
            showCancelButton: true,
            confirmButtonColor: &quot;#3085d6&quot;,
            cancelButtonColor: &quot;#d33&quot;,
            confirmButtonText: &quot;¡Sí, Bórralo!&quot;,
          })
          .then((result) =&gt; {
            // Send Request to the server
  
            this.form
              .delete(&quot;api/user/&quot; + id)
              .then(() =&gt; {
                if (result.value) {
                  swal.fire(
                    &quot;Borrado!&quot;,
                    &quot;El usuario ha sido eliminado.&quot;,
                    &quot;success&quot;
                  );
                  Fire.$emit(&quot;AfterCreate&quot;);
                }
              })
              .catch(() =&gt; {
                swal(&quot;¡Fallo!&quot;, &quot;Algo salió mal&quot;, &quot;warning&quot;);
              });
          });
      },
      loadUsers() {
        axios.get(&quot;api/user&quot;).then(({ data }) =&gt; (this.users = data.data));
      },
      createUser() {
        this.$Progress.start();
        this.form
          .post(&quot;api/user&quot;)
          .then(() =&gt; {
            Fire.$emit(&quot;AfterCreate&quot;);
            $(&quot;#addNew&quot;).modal(&quot;hide&quot;);
  
            toast.fire({
              icon: &quot;success&quot;,
              title: &quot;Usuario creado con éxito&quot;,
            });
            this.$Progress.finish();
          })
          .catch(() =&gt; {
            this.$Progress.fail();
            toast.fire({
              icon: &quot;error&quot;,
              title: &quot;Usuario no fue creado.&quot;,
            });
          });
      },
    },
    created() {
      this.loadUsers();
      Fire.$on(&quot;AfterCreate&quot;, () =&gt; {
        this.loadUsers();
      });
    },
  };
  &lt;/script&gt;
  </code></pre>
  <p>UserController.php</p>
  <pre><code>&lt;?php
  namespace App\Http\Controllers\API;  
  use App\Http\Controllers\Controller;
  use Illuminate\Http\Request;
  use App\User;
  use Illuminate\Support\Facades\Hash;
  class UserController extends Controller
  {
      public function __construct()
      {
          $this-&gt;middleware('auth:api');
      }
  
      public function index()
      {
          return User::latest()-&gt;paginate(10);
      }
  
      public function store(Request $request)
      {
  
          $this-&gt;validate($request, [
              'name' =&gt; 'required|string|max:191',
              'email' =&gt; 'required|string|email|max:255|unique:users',
              'password' =&gt; 'required|string|min:8'
          ]);
          return User::create([
              'name' =&gt; $request['name'],
              'email' =&gt; $request['email'],
              'type' =&gt; $request['type'],
              'bio' =&gt; $request['bio'],
              'photo' =&gt; $request['photo'],
              'password' =&gt; Hash::make($request['password']),
          ]);
      }
   
      public function empleado()
      {
          return auth('api')-&gt;user();
      }
  
      public function updateProfile(Request $request)
      {
          $user =  auth('api')-&gt;user();
  
          if($request-&gt;photo) {
             $name = time().'.' . explode('/', explode(':', substr($request-&gt;photo, 0, strpos ($request-&gt;photo, ';')))[1])[1]; 
             \Image::make($request-&gt;photo)-&gt;save(public_path('img/profile/').$name);
          }
          // return ['message' =&gt; 'Éxito'];
      }
  
      public function profile()
      {
          return auth('api')-&gt;user();
      }
  
      public function show($id)
      {
          //
      }
  
      public function update(Request $request, $id)
      {
          $user = User::findOrFail($id);
  
          $this-&gt;validate($request, [
              'name' =&gt; 'required|string|max:191',
              'email' =&gt; 'required|string|email|max:255|unique:users,email,'.$user-&gt;id,
              'password' =&gt; 'sometimes|min:8'
          ]);
  
          $user-&gt;update($request-&gt;all());
          return ['message' =&gt; 'Actualizó los datos del usuario.'];
      }
      public function destroy($id)
      {
          $user = User::findOrFail($id);
  
          // Delete the user
          $user-&gt;delete();
  
          return ['message' =&gt; 'Usuario Eliminado'];
      }
  }
  </code></pre>
  <p>User.php</p>
  <pre><code>&lt;?php
  namespace App;
  use Illuminate\Contracts\Auth\MustVerifyEmail;
  use Illuminate\Foundation\Auth\User as Authenticatable;
  use Illuminate\Notifications\Notifiable;
  use Laravel\Passport\HasApiTokens;
  class User extends Authenticatable
  {
      use  HasApiTokens, Notifiable;
  
      protected $fillable = [
          'name', 'email', 'password', 'bio', 'photo', 'type'
      ];
  
      protected $hidden = [
          'password', 'remember_token',
      ];
  
      protected $casts = [
          'email_verified_at' =&gt; 'datetime',
      ];
  }
  </code></pre>
  <p>Empleado.vue</p>
  <pre><code>&lt;template&gt;
    &lt;div class=&quot;container-fluid&quot;&gt;
      &lt;div class=&quot;row pt-3&quot;&gt;
        &lt;div class=&quot;col-12&quot;&gt;
          &lt;div class=&quot;card&quot;&gt;
            &lt;div class=&quot;card-header&quot;&gt;
              &lt;h3 class=&quot;card-title&quot;&gt;Tablero de Emmpleados&lt;/h3&gt;
              &lt;div class=&quot;card-tools&quot;&gt;
                &lt;!-- &lt;button class=&quot;btn btn-success&quot; data-toggle=&quot;modal&quot; data-target=&quot;#addNew&quot;&gt; --&gt;
                &lt;button class=&quot;btn btn-success&quot; @click=&quot;newModal&quot;&gt;
                  &lt;i class=&quot;fas fa-user-plus&quot;&gt;&lt;/i&gt; Añadir Nuevo
                  Empleado
                &lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;!-- /.card-header --&gt;
            &lt;div class=&quot;card-body table-responsive p-0&quot;&gt;
              &lt;table class=&quot;table table-hover text-nowrap&quot;&gt;
                &lt;thead&gt;
                  &lt;tr&gt;
                    &lt;th&gt;RFC&lt;/th&gt;
                    &lt;th&gt;Nombre&lt;/th&gt;
                    &lt;th&gt;Calle&lt;/th&gt;
                    &lt;th&gt;Colonia&lt;/th&gt;
                    &lt;th&gt;Ciudad&lt;/th&gt;
                    &lt;th&gt;Estado&lt;/th&gt;
                    &lt;th&gt;Código Postal&lt;/th&gt;
                    &lt;th&gt;País&lt;/th&gt;
                  &lt;/tr&gt;
                &lt;/thead&gt;
                &lt;tbody&gt;
                  &lt;tr v-for=&quot;empleado in empleados&quot; :key=&quot;empleado.id&quot;&gt;
                    &lt;td&gt;{{ empleado.emprfc }}&lt;/td&gt;
                    &lt;td&gt;{{ empleado.empnombre }}&lt;/td&gt;
                    &lt;td&gt;{{ empleado.empcalle }}&lt;/td&gt;
                    &lt;td&gt;{{ empleado.empcolonia }}&lt;/td&gt;
                    &lt;td&gt;{{ empleado.empestado }}&lt;/td&gt;
                    &lt;td&gt;{{ empleado.empcpostal }}&lt;/td&gt;
                    &lt;td&gt;{{ empleado.pais }}&lt;/td&gt;
                    &lt;td&gt;
                      &lt;a class=&quot;btn btn-primary&quot; href=&quot;#&quot; @click=&quot;editModal(empleado)&quot;&gt;
                        &lt;i class=&quot;fas fa-edit&quot;&gt;&lt;/i&gt;
                      &lt;/a&gt;
                      &lt;a class=&quot;btn btn-danger&quot; href=&quot;#&quot; @click=&quot;deleteEmpleado(empleado.id)&quot;&gt;
                        &lt;i class=&quot;fas fa-trash&quot;&gt;&lt;/i&gt;
                      &lt;/a&gt;
                    &lt;/td&gt;
                  &lt;/tr&gt;
                &lt;/tbody&gt;
              &lt;/table&gt;
            &lt;/div&gt;
            &lt;!-- /.card-body --&gt;
          &lt;/div&gt;
          &lt;!-- /.card --&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;form @submit.prevent=&quot;editmode ? updateEmpleado() : createEmpleado()&quot;&gt;
        &lt;!-- Modal --&gt;
        &lt;div
          class=&quot;modal fade&quot;
          id=&quot;addNew&quot;
          tabindex=&quot;-1&quot;
          aria-labelledby=&quot;exampleModalLabel&quot;
          aria-hidden=&quot;true&quot;
        &gt;
          &lt;div class=&quot;modal-dialog modal-dialog-centered&quot;&gt;
            &lt;div class=&quot;modal-content&quot;&gt;
              &lt;div class=&quot;modal-header&quot;&gt;
                &lt;h5 v-show=&quot;!editmode&quot; class=&quot;modal-title&quot; id=&quot;exampleModalLabel&quot;&gt;Añadir Nuevo&lt;/h5&gt;
                &lt;h5
                  v-show=&quot;editmode&quot;
                  class=&quot;modal-title&quot;
                  id=&quot;exampleModalLabel&quot;
                &gt;Actualizar datos de Empleado&lt;/h5&gt;
                &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-label=&quot;Close&quot;&gt;
                  &lt;span aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;/span&gt;
                &lt;/button&gt;
              &lt;/div&gt;
              &lt;div class=&quot;modal-body&quot;&gt;
                &lt;div class=&quot;form-group&quot;&gt;
                  &lt;input
                    v-model=&quot;form.emprfc&quot;
                    type=&quot;text&quot;
                    name=&quot;emprfc&quot;
                    placeholder=&quot;RFC&quot;
                    class=&quot;form-control&quot;
                    :class=&quot;{
                                          'is-invalid': form.errors.has('emprfc')
                                      }&quot;
                  /&gt;
                  &lt;has-error :form=&quot;form&quot; field=&quot;emprfc&quot;&gt;&lt;/has-error&gt;
                &lt;/div&gt;
  
                &lt;div class=&quot;form-group&quot;&gt;
                  &lt;input
                    v-model=&quot;form.empnombre&quot;
                    type=&quot;text&quot;
                    name=&quot;empnombre&quot;
                    placeholder=&quot;Nombre&quot;
                    class=&quot;form-control&quot;
                    :class=&quot;{
                                          'is-invalid': form.errors.has('empnombre')
                                      }&quot;
                  /&gt;
                  &lt;has-error :form=&quot;form&quot; field=&quot;empnombre&quot;&gt;&lt;/has-error&gt;
                &lt;/div&gt;
  
                &lt;div class=&quot;form-group&quot;&gt;
                  &lt;input
                    v-model=&quot;form.empcalle&quot;
                    type=&quot;text&quot;
                    name=&quot;empcalle&quot;
                    placeholder=&quot;Calle&quot;
                    class=&quot;form-control&quot;
                    :class=&quot;{
                                          'is-invalid': form.errors.has('empcalle')
                                      }&quot;
                  /&gt;
                  &lt;has-error :form=&quot;form&quot; field=&quot;empcalle&quot;&gt;&lt;/has-error&gt;
                &lt;/div&gt;
  
                &lt;div class=&quot;form-group&quot;&gt;
                  &lt;input
                    v-model=&quot;form.empcolonia&quot;
                    type=&quot;text&quot;
                    name=&quot;empcolonia&quot;
                    placeholder=&quot;Colonia&quot;
                    class=&quot;form-control&quot;
                    :class=&quot;{
                                          'is-invalid': form.errors.has(
                                              'empcolonia'
                                          )
                                      }&quot;
                  /&gt;
                  &lt;has-error :form=&quot;form&quot; field=&quot;empcolonia&quot;&gt;&lt;/has-error&gt;
                &lt;/div&gt;
  
                &lt;div class=&quot;form-group&quot;&gt;
                  &lt;input
                    v-model=&quot;form.empciudad&quot;
                    type=&quot;text&quot;
                    name=&quot;empciudad&quot;
                    placeholder=&quot;Ciudad&quot;
                    class=&quot;form-control&quot;
                    :class=&quot;{
                                          'is-invalid': form.errors.has(
                                              'empciudad'
                                          )
                                      }&quot;
                  /&gt;
                  &lt;has-error :form=&quot;form&quot; field=&quot;empciudad&quot;&gt;&lt;/has-error&gt;
                &lt;/div&gt;
  
                &lt;div class=&quot;form-group&quot;&gt;
                  &lt;input
                    v-model=&quot;form.empestado&quot;
                    type=&quot;text&quot;
                    name=&quot;empestado&quot;
                    placeholder=&quot;Estado&quot;
                    class=&quot;form-control&quot;
                    :class=&quot;{
                                          'is-invalid': form.errors.has(
                                              'empestado'
                                          )
                                      }&quot;
                  /&gt;
                  &lt;has-error :form=&quot;form&quot; field=&quot;empestado&quot;&gt;&lt;/has-error&gt;
                &lt;/div&gt;
  
                &lt;div class=&quot;form-group&quot;&gt;
                  &lt;input
                    v-model=&quot;form.empcpostal&quot;
                    type=&quot;text&quot;
                    name=&quot;empcpostal&quot;
                    placeholder=&quot;Código Postal&quot;
                    class=&quot;form-control&quot;
                    :class=&quot;{
                                          'is-invalid': form.errors.has(
                                              'empcpostal'
                                          )
                                      }&quot;
                  /&gt;
                  &lt;has-error :form=&quot;form&quot; field=&quot;empcpostal&quot;&gt;&lt;/has-error&gt;
                &lt;/div&gt;
  
                &lt;div class=&quot;form-group&quot;&gt;
                  &lt;input
                    v-model=&quot;form.emppais&quot;
                    type=&quot;text&quot;
                    name=&quot;emppais&quot;
                    placeholder=&quot;País&quot;
                    class=&quot;form-control&quot;
                    :class=&quot;{
                                          'is-invalid': form.errors.has(
                                              'emppais'
                                          )
                                      }&quot;
                  /&gt;
                  &lt;has-error :form=&quot;form&quot; field=&quot;emppais&quot;&gt;&lt;/has-error&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class=&quot;modal-footer&quot;&gt;
                &lt;button type=&quot;button&quot; class=&quot;btn btn-danger&quot; data-dismiss=&quot;modal&quot;&gt;Cerrar&lt;/button&gt;
                &lt;button v-show=&quot;editmode&quot; type=&quot;submit&quot; class=&quot;btn btn-success&quot;&gt;Actualizar&lt;/button&gt;
                &lt;button v-show=&quot;!editmode&quot; type=&quot;submit&quot; class=&quot;btn btn-primary&quot;&gt;Crear&lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  export default {
    data() {
      return {
        updateEmpleado() {
          this.$Progress.start();
          this.form
            .put(&quot;api/empleado/&quot; + this.form.id)
            .then(() =&gt; {
              // successfull
              $(&quot;#addNew&quot;).modal(&quot;hide&quot;);
              swal.fire(&quot;Actualizó&quot;, &quot;Datos del usuario actualizados&quot;, &quot;success&quot;);
              this.$Progress.finish();
              Fire.$emit(&quot;AfterCreate&quot;);
            })
            .catch(() =&gt; {
              // Unsuccessfull
              this.$Progress.fail();
            });
        },
        editmode: true,
        empleados: {},
        form: new Form({
          id: &quot;&quot;,
          emprfc: &quot;&quot;,
          empnombre: &quot;&quot;,
          empcalle: &quot;&quot;,
          empcolonia: &quot;&quot;,
          empciudad: &quot;&quot;,
          empestado: &quot;&quot;,
          empcpostal: &quot;&quot;,
          emppais: &quot;&quot;,
        }),
      };
    },
    methods: {
      editModal(empleado) {
        this.editmode = true;
        this.form.reset();
        $(&quot;#addNew&quot;).modal(&quot;show&quot;);
        this.form.fill(empleado);
      },
      newModal() {
        this.editmode = false;
        this.form.reset();
        $(&quot;#addNew&quot;).modal(&quot;show&quot;);
      },
      deleteEmpleado(id) {
        swal
          .fire({
            title: &quot;¿Estas seguro?&quot;,
            text: &quot;¡No podrás revertir esto!&quot;,
            icon: &quot;warning&quot;,
            showCancelButton: true,
            confirmButtonColor: &quot;#3085d6&quot;,
            cancelButtonColor: &quot;#d33&quot;,
            confirmButtonText: &quot;¡Sí, Bórralo!&quot;,
          })
          .then((result) =&gt; {
            // Send Request to the server
  
            this.form
              .delete(&quot;api/empleado/&quot; + id)
              .then(() =&gt; {
                if (result.value) {
                  swal.fire(
                    &quot;Borrado!&quot;,
                    &quot;El empleado ha sido eliminado.&quot;,
                    &quot;success&quot;
                  );
                  Fire.$emit(&quot;AfterCreate&quot;);
                }
              })
              .catch(() =&gt; {
                swal(&quot;¡Fallo!&quot;, &quot;Algo salió mal&quot;, &quot;warning&quot;);
              });
          });
      },
      loadEmpleados() {
        axios
          .get(&quot;api/empleado&quot;)
          .then(({ data }) =&gt; (this.empleados = data.data));
      },
      createEmpleado() {
        this.$Progress.start();
        this.form
          .post(&quot;api/empleado&quot;)
          .then(() =&gt; {
            Fire.$emit(&quot;AfterCreate&quot;);
            $(&quot;#addNew&quot;).modal(&quot;hide&quot;);
            toast.fire({
              icon: &quot;success&quot;,
              title: &quot;Empleado creado con éxito&quot;,
            });
            this.$Progress.finish();
          })
          .catch(() =&gt; {
            this.$Progress.fail();
            toast.fire({
              icon: &quot;error&quot;,
              title: &quot;Empleado no fue creado.&quot;,
            });
          });
      },
    },
    created() {
      this.loadEmpleados();
      Fire.$on(&quot;AfterCreate&quot;, () =&gt; {
        this.loadEmpleados();
      });
    },
  };
  &lt;/script&gt;
  </code></pre>
  <p>EmpleadoController.php</p>
  <pre><code>&lt;?php  
  namespace App;  
  use Illuminate\Contracts\Auth\MustVerifyEmail;
  use Illuminate\Foundation\Auth\User as Authenticatable;
  use Illuminate\Notifications\Notifiable;
  use Laravel\Passport\HasApiTokens;    
  class Empleado extends Authenticatable
  {
      use  HasApiTokens, Notifiable;
  
      protected $fillable = [
          'emprfc', 'empnombre', 'empcalle', 'empcolonia', 'empciudad', 'empestado', 'empcpostal', 'emppais'
      ];    
      protected $hidden = [
          //
      ];    
      protected $casts = [
          'email_verified_at' =&gt; 'datetime',
      ];
  }
  </code></pre>
  <p>Empleado.php</p>
  <pre><code>&lt;?php    
  namespace App;    
  use Illuminate\Contracts\Auth\MustVerifyEmail;
  use Illuminate\Foundation\Auth\User as Authenticatable;
  use Illuminate\Notifications\Notifiable;
  use Laravel\Passport\HasApiTokens;    
  class Empleado extends Authenticatable
  {
      use  HasApiTokens, Notifiable;
      protected $fillable = [
          'emprfc', 'empnombre', 'empcalle', 'empcolonia', 'empciudad', 'empestado', 'empcpostal', 'emppais'
      ];   
  
      protected $hidden = [
          //
      ];
  
      protected $casts = [
          'email_verified_at' =&gt; 'datetime',
      ];
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/PPfWT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PPfWT.png" alt="Image of network data tab showing me as user." /></a>
  Here you can see that my user name is being returned correctly.</p>
  <p><a href="https://i.stack.imgur.com/HivMa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HivMa.png" alt="Here is the Employee data entry form for the user (me in this case)." /></a>
  Here I have the form to add employee data.</p>
  <p><a href="https://i.stack.imgur.com/aPNOw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aPNOw.png" alt="Image of network error" /></a>
  In this image, you can see the type of error I am receiving.</p>
  <p>If I am missing any code, please let me know so I can edit my query. Thank you in advance.</p>