聞きたいこと
Laravel, Vue, axiosを使用してWebアプリを作成しているのですが、掲題のエラーが表示されてしまいます。
- エラーメッセージ
VM129109:1 DELETE http://localhost/api/hub/session?sessionName=aiueo 405 (Method Not Allowed)
- api.php
Route::delete('/hub/session/{sessionName}', 'Hub\SessionsController@destroy');
- web.php
Route::get('/{any}', function () { return view('app'); })->where('any', '.*');
- コントローラー
?php namespace App\Http\Controllers\Hub; use Illuminate\Http\Request; use App\Http\Controllers\Controller; class SessionsController extends Controller { /** * @param $sessionName * @return string * */ public function destroy($sessionName) { return "DELETE"; } }
- JavaScript
<template> <b-card :header="caption"> <b-table :hover="hover" :striped="striped" :bordered="bordered" :small="small" :fixed="fixed" :items="items" :fields="fields" :current-page="currentPage" :per-page="perPage" responsive="sm" > <template slot="切断" slot-scope="data" > <button v-on:click="deleteSession('aiueo');"> {{ data.value }} </button> </template> </b-table> <nav> <b-pagination v-model="currentPage" :total-rows="getRowCount(items)" :per-page="perPage" prev-text="Prev" next-text="Next" hide-goto-end-buttons /> </nav> </b-card> </template> <script> import axios from 'axios' /** * Randomize array element order in-place. * Using Durstenfeld shuffle algorithm. */ const shuffleArray = (array) => { for (let i = array.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)) const temp = array[i] array[i] = array[j] array[j] = temp } return array } export default { name : 'CTable', props: { caption: { type : String, default: 'Table', }, hover: { type : Boolean, default: false, }, striped: { type : Boolean, default: false, }, bordered: { type : Boolean, default: false, }, small: { type : Boolean, default: false, }, fixed: { type : Boolean, default: false, }, fields: { type : Array, default: false }, sessions: { type : Array, default: false } }, data: () => { return { currentPage: 1, perPage : 20, totalRows : 0, } }, computed: { items() { return shuffleArray( this.sessions ) } }, methods: { getRowCount (items) { return items.length }, deleteSession ($sessionName) { axios .delete('http://localhost/api/hub/session', {params: {'sessionName': 'aiueo'}}) .then(response => (console.log(response))) } }, } </script>
追記
- JavaScript
<template> <b-card :header="caption"> <b-table :hover="hover" :striped="striped" :bordered="bordered" :small="small" :fixed="fixed" :items="items" :fields="fields" :current-page="currentPage" :per-page="perPage" responsive="sm" > <template slot="切断" slot-scope="data" > <button v-on:click="deleteSession('aiueo');"> {{ data.value }} </button> <form method="POST" @submit.prevent="deleteSession('aiueo')"> <input name="_method" type="hidden" value="DELETE"> <button type="button" @click="deleteSession">切断する</button> </form> </template> </b-table> <nav> <b-pagination v-model="currentPage" :total-rows="getRowCount(items)" :per-page="perPage" prev-text="Prev" next-text="Next" hide-goto-end-buttons /> </nav> </b-card> </template> <script> import axios from 'axios' /** * Randomize array element order in-place. * Using Durstenfeld shuffle algorithm. */ const shuffleArray = (array) => { for (let i = array.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)) const temp = array[i] array[i] = array[j] array[j] = temp } return array } export default { name : 'CTable', props: { caption: { type : String, default: 'Table', }, hover: { type : Boolean, default: false, }, striped: { type : Boolean, default: false, }, bordered: { type : Boolean, default: false, }, small: { type : Boolean, default: false, }, fixed: { type : Boolean, default: false, }, fields: { type : Array, default: false }, sessions: { type : Array, default: false } }, data: () => { return { currentPage: 1, perPage : 20, totalRows : 0, } }, computed: { items() { return shuffleArray( this.sessions ) } }, methods: { getRowCount (items) { return items.length }, deleteSession ($sessionName) { const params = new URLSearchParams() params.append('sessionName', $sessionName) axios .delete('http://localhost/api/hub/session', { data: params }, { headers: { 'Content-Type': 'application/x-www-form-urlencoded', }, }) .then(response => (console.log(response))) } }, } </script>
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。