I am using Laravel VueJS 3 to build a small project,

I use axios.put method for update details for single user in a table row via a modal, but I have problems when I click on submit button of a form inside a modal with axios.put, even I filled all data for all inputs but It still said the errors below, can you guys show me how can I fix this please?

Thanks!

ERROR

My backend:

    public function updateUser(Request $req, User $user)
    {
        $req->validate([
            'name'  =>  'required|string|max:255',
            'email'     =>  'required|email|unique:users,email,' . $user->id,
            'password'  =>  'same:confirmPassword|max:64',
            'roles'     =>  'required',
        ]);

        $input = $req->all();
        if (!empty($input['password'])) {
            $input['password']  =  Hash::make($input['password']);
        } else {
            $input = Arr::except($input, 'password');
        }
        $user->update($input);
        $user->syncRoles($input['roles']);
        return $this->sendResponse($user, 'Updated!');
    }

My JS Code:

import axios from "axios";

let API_URL = "http://localhost:8000";

export default {
  name: "manageUsers",
  components: {},
  data() {
    return {
      users: [],
      userInfo: {
        id: 0,
        name: "",
        username: "",
        phone: "",
        email: "",
        password: "",
      },
    };
  },
  methods: {
    refreshUsers() {
      axios.get(`${API_URL}/api/users/allusers`).then((res) => {
        this.users = res.data.data;
      });
    },
    getUserInfo(user) {
      axios
        .get(`${API_URL}/api/users/show/`   user.id)
        .then((res) => {
          this.userInfo.id = res.data.data.id;
          this.userInfo.name = res.data.data.name;
          this.userInfo.email = res.data.data.email;
          this.userInfo.username = res.data.data.username;
          this.userInfo.phone = res.data.data.phone;
        })
        .catch((error) => {
          console.log("ERRRR:: ", error.response.data);
        });
    },
    updateUser() {
      axios
        .put(`${API_URL}/api/users/update/${this.userInfo.id}`)
        .then((res) => {
          this.refreshUsers();
          alert(res.data);
        })
        .catch((error) => {
          console.log("ERRRR:: ", error.response.data);
        });
    },
  },
  mounted() {
    this.refreshUsers();
  },
};

My VueJS template code:

<template>
       <table  id="datatable">
          <tbody>
            <tr v-for="(user, id) in users" :key="user.id">
              <td>{{ user.id }}</td>
              <td>{{ user.name }}</td>
              <td>{{ user.email }}</td>
              <td>{{ user.username }}</td>
              <td >
                <button
                  
                  data-toggle="modal" data-target="#userEditModal"
                  @click="getUserInfo(user)">
                  <i ></i>
                </button>
              </td>
            </tr>
          </tbody>
        </table>


   <!-- EDIT USER MODAL -->
  <div  id="userEditModal" tabindex="-1" role="dialog"
    aria-labelledby="userEditModal" aria-hidden="true">
    <div  role="document">
      <div >
        <div >
          <h4  id="userEditModal">
           Edit user <strong >{{ userInfo.username }}</strong>
          </h4>
          <button type="button" 
            data-dismiss="modal" aria-hidden="true">
            <i ></i>
          </button>
        </div>
        <form >
          <div >
            <div >
              <label >Username</label>
              <div >
                <div >
                  <input type="text"  name="username"
                    v-model="userInfo.username" />
                </div>
              </div>
            </div>
            <div >
              <label >Name</label>
              <div >
                <div >
                  <input type="text"  name="name"
                    v-model="userInfo.name" />
                </div>
              </div>
            </div>
            <div >
              <label >Email</label>
              <div >
                <div >
                  <input type="email" name="email" 
                    v-model="userInfo.email" />
                </div>
              </div>
            </div>
            <div >
              <label >Roles</label>
              <div >
                <div >
                  <input type="roles" name="roles" 
                    v-model="userInfo.roles" />
                </div>
              </div>
            </div>
          </div>
        <div >
          <button type="button"  data-dismiss="modal">
            Close
          </button>
          <button type="submit"  data-dismiss="modal"
            @click="updateUser()">
            Save changes
          </button>
        </div>
       </form>
      </div>
    </div>
  </div>
  <!-- END EDIT USER MODAL -->
    </template>```

CodePudding user response：

I think you're not passing any parameters to your put call. axios docs

example:

axios.put('https://httpbin.org/put', { hello: 'world' });

When an issue like this arises you can always check your network tab in your browser. to see what data is send to your server.