deleting data from database, "The GET method is not supported"

Trying to delete data from database and this is how I am using controller and route for this:

controller

public function articleDelete($id)
{

    return $article = Article::destroy($id);

    // return response()->json([
    //     "article" => $article,
    //     "message" => "Deleted Successfully"
    // ]);

}

api

Route::group(['prefix' => 'v1'], function(){
    /* fetch */
    Route::get("/articles", "Api\ArticlesController@allArticles");
    Route::get("/articles/{id}", "Api\ArticlesController@singleArticle");

    /* add new & delete */
    Route::post("articles/add", "Api\ArticlesController@newArticle");
    Route::post("articles/delete/{id}", "Api\ArticlesController@articleDelete");
});

and this is my method in vue components:

methods: {
    deleteArticle(article, id){
        axios.post("api/v1/articles/delete/" + article.id).then(response => {
            let index = this.articles.indexOf(article);
            this.articles.splice(index,1);
            console.log(response.data);
        })
    },
}

when I adding new article there no problem. But when I try to delete article there are errors. First in console my id is being undefined which is .../api/v1/articles/delete/undefined

and the this is the error.

The GET method is not supported for this route. Supported methods: POST.

I am already using post for the route why it s keep saying "get method is not supported." I am not using get for the route. And I cleared route:clear and checked, there is no problem route is on post.

What I am missing here? Thank you.

Additionally I am giving the key prop when I looping the datas. <tr :key="item.id" v-for="(item, index) in fetchArticle">

I don't understand why ID part is being undefined.

via Chebli Mohamed