web-dev-qa-db-ja.com

Axiosのメソッドを削除、LaravelおよびVueJS

私はlaravel以下のようにaxios経由で削除リクエストを送信しようとしています:

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

Axiosのドキュメントから、削除リクエストにはconfigObjectを使用する必要があることを読みましたので、上記のように書き換えることができます:

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

Api.phpにRoute::resource('users', 'UsersController');があるので、削除のデフォルトルートは次のとおりです。

_DELETE| api/users/{user}| users.destroy 
_

コントローラーのメソッドは次のとおりです。

_|App\Http\Controllers\UsersController@destroy
_

Api/users/12のような単一のIDを渡すと、期待どおりにユーザーを削除できますが、正しく削除されますが、上記の配列を渡そうとすると複雑になります。

axiosのドキュメントaxios.delete('api/users/', {params: {id: this.checkedNames}})に従って試してみると、この_http://lorillacrud.dev/api/users?id[]=21&id[]=20_を送信しているように見えますが、許可されていない405メソッドを取得しています。

axios.delete('api/users/' + this.checkedNames )を試してみると、_http://lorillacrud.dev/api/users/20,21_を取得するので、destroyメソッドでIDを取得して削除できますが、これが正しい方法かどうか疑問に思っていますか?

更新

私はそれを機能させたように見えましたが、理解していないので、私が実際に仕事をしていることを理解するための助けはまだ感謝しています!

したがって、変更する場合:

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

そして、私のdestroyメソッドでは:

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

そう...

_// 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)
_

申し訳ありませんが、私は多くの混乱を抱えています。

ルート名は_user.destroy_です。配列を渡すとなぜ機能し、単一の値を渡すと機能しないのか、配列を渡すとdeleteメソッドのあるルートが削除されないのはなぜですか?

_api/users/destroy_と_api/users_のみの使用の違いはありますか?

これについての助けをありがとう!

5

これは、メソッドシグネチャが原因です。 deleteを使用する場合のデフォルトのResourceルートは、単一のパラメーターを想定しています。そのため:

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

必須パラメーターが欠落しています。ルート定義は

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

通常、デフォルトの動作から逸脱する場合は、独自の関数を作成することをお勧めします。したがって、デフォルトのdestroy($id)関数をそのままにして、単一のエントリを削除し、多くのエントリを削除する新しい関数を作成できます。ルートを追加することから始めます

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

次に、それを処理する関数を定義します

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

要約すると、問題はルートの定義に起因します。 Axiosからのルートは、Laravelからのルート定義と一致しなかったため、405です。

5
EddyTheDove

私も同じ問題を経験しました。これは私のために働く:

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

_axios.delete_の代わりにaxios.post()を使用し、__method_ "delete"を送信する

3
Elib

削除要求を行う際にモデルとしてデータを送信する問題がありました。次のような修正が見つかりました。

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

配列内のユーザーの削除

その他の適切なオプションは、javascript配列を文字列に変換し、オブジェクトを渡すのではなく、必須パラメーターを渡して渡すことです。ここに例:

Vue.js 2.5.17以降

//Use the javascript method JSON.stringify to convert the array into string: axios.delete('api/users/' + JSON.stringify(this.checkedNames))

In Laravel 5.3+

//Resource default route (you don't need to create, it already exists)
Route::delete('api/users/{id}', 'UserController@destroy'); 

//In laravel delete method, convert the parameter to original array format 
public function destroy($id)
{
    User::destroy(json_decode($id); //converting and deleting users in array 'id'
}

IDによる単一ユーザーの削除

IDを渡すだけです。変換する必要はありません。

Vue.js 2.5.17以降

axios.delete('api/users/' + id)

In Laravel 5.3+

パラメータには、useriditem、...という名前を付けることができます。

In Laravel 5.6+ < is named as $id //this can be the id or the user object
In Laravel 5.7+ > is named as $user //this can be the id or the user object

public function destroy($id)
{
    User::destroy($id); 
}
0
Jose Seie