web-dev-qa-db-fra.com

Supprimer la méthode dans Axios, Laravel et VueJS

J'essaie d'envoyer une demande de suppression via axios à Laravel comme suit:

axios.delete('api/users/' + this.checkedNames)
.then((response) => {
    console.log(response)
}, (error) => {
    // error callback
})

Dans la documentation d’axios, j’ai lu que, pour la demande de suppression, nous devrions utiliser un configObject afin que ce qui précède puisse être réécrit de la manière suivante:

axios.delete('api/users/', {params: {ids:     
    this.checkedNames})
.then((response) => {
    console.log(response)
}, (error) => {
    // error callback
})

J'ai alors Route::resource('users', 'UsersController'); dans api.php donc la route par défaut pour la suppression est:

DELETE| api/users/{user}| users.destroy 

et la méthode du contrôleur est: 

|App\Http\Controllers\UsersController@destroy

Je suis capable de supprimer comme prévu un utilisateur lorsque je passe un identifiant unique, disons api/users/12, il est supprimé correctement mais lorsque j'essaie de transmettre le tableau ci-dessus, les choses se compliquent.

si j'essaie selon la documentation de axios axios.delete('api/users/', {params: {id: this.checkedNames}}) il semble que j'envoie ce http://lorillacrud.dev/api/users?id[]=21&id[]=20 mais je reçois une méthode 405 non autorisée.

si j'essaie axios.delete('api/users/' + this.checkedNames ), j'obtiens http://lorillacrud.dev/api/users/20,21 et, dans ma méthode de destruction, je peux récupérer les identifiants et les supprimer, mais je me demande si c'est la bonne façon de le faire?

mettre à jour

Il me semblait que je l'avais fait fonctionner mais je ne comprenais pas, alors toute aide était toujours appréciée pour comprendre ce que je faisais réellement!

Donc, si changer à:

axios.delete('api/users/destroy', {params: {'id': this.checkedNames})

et dans ma méthode de destruction:

    if ($request->id) {
        foreach ($request->id as $id) {
            User::destroy($id);
        }
    }
    User::destroy($id);
}

Alors...

// not deletes the user
axios.delete('api/users/destroy', {params: {id: id}}) 

// ok deletes the users when using request->id in a for loop in the destroy laravel method.
axios.delete('api/users/destroy', {params: {ids: this.checkedNames}}) 

// ok deletes one user
axios.delete('api/users/' + id)

désolé les gars mais j'ai beaucoup de confusion pourquoi et quoi !!!

Le nom de la route est user.destroy pourquoi ça marche quand je passe un tableau et pas quand je passe une seule valeur, pourquoi vice-versa la route avec la méthode delete ne sera-t-elle pas supprimée quand passera un tableau ???

Y a-t-il une différence entre api/users/destroy et api/users uniquement?

Merci pour toute aide à ce sujet!

3
Lorenzo Beltrame

C'est à cause des signatures de méthode. La route delete par défaut lors de l'utilisation de Resource attend un seul paramètre. Alors quand on fait:

axios.delete('api/users', {params: {'id': this.checkedNames})

il vous manque un required paramètre. La définition de l'itinéraire est

Route::delete('api/users/{id}', 'UserController@destroy');
// You are missing `id` here. So it won't work. 

En général, si vous vous écartez du comportement par défaut, il est recommandé de créer votre propre fonction. Vous pouvez donc laisser la fonction destroy($id) par défaut telle quelle pour supprimer une entrée et écrire une nouvelle fonction qui en supprimera plusieurs. Commencez par ajouter un itinéraire pour cela

Route::delete('api/users', 'UserController@deleteMany');

Puis définissez la fonction pour la gérer

public function deleteMany(Request $request)
{
    try 
    {
        User::whereIn('id', $request->id)->delete(); // $request->id MUST be an array
        return response()->json('users deleted');
    }

    catch (Exception $e) {
        return response()->json($e->getMessage(), 500);
    }
}

Pour résumer, votre problème venait de la définition de route. Votre itinéraire à partir d'Axios ne correspond pas à la définition d'itinéraire de Laravel, d'où le 405.

3
EddyTheDove

J'ai aussi connu le même problème. Cela fonctionne pour moi:

deletePost: function(id) {
                axios.post('/posts/'+id,{_method: 'delete'})
            }

Utiliser axios.post() au lieu de axios.delete et envoyer _method "delete" 

0
Elib

J'avais un problème pour envoyer des données en tant que modèle lors d'une demande de suppression. J'ai trouvé un correctif comme suit:

deleteCall (itemId, jsonModel) {
return api.delete(`/users/${itemId}/accounts/`, {data: jsonModel})
},
0
Ravi Anand