vue 和路由错误 laravel

Question

我的路由和 vue 文件出错，当我提交表单时，它给了我 MethodNotAllowedHttpException，我检查了所有内容，但无法得到错误...

web.php

Route::get('/', 'HomeController@index')->name('home');

Auth::routes();

Route::get('/home', 'HomeController@index')->name('home');

Route::post('addServices','Services/ServicesController@createServices');

添加服务.vue

    <template>
    <form class="form-vertical" method="POST">
        <div class="form-group">
            <label for="name" class="label-control">اسم الخدمة</label>
            <input type="text" name="name" id="name" v-model="name" class="form-control">
        </div>
        <div class="form-group">
            <label for="image" class="label-control">معرض الخدمة</label>
            <input type="file" id="image" v-el:image>
        </div>
        <div class="form-group">
            <label for="body" class="label-control">وصف الخدمة</label>
            <textarea class="form-control" cols="4" rows="10" name="body" id="body" v-model="body"></textarea>
        </div>
        <div class="form-group">
            <label for="category_id" class="label-control">التصنيف</label>
            <select class="form-control" name="category_id" id="category_id" v-model="category_id">
                <option>آختر التصنيف</option>
            </select>
        </div>
        <div class="form-group">
            <label for="price" class="label-control">السعر</label>
            <input type="number" name="price" id="price" class="form-control" v-model="price">
        </div>
        <hr>
        <div class="form-group">
            <input type="submit" @click="AddThisServices()" name="submit" value="اضافة الخدمة" class="btn btn-primary">
        </div>
    </form>
</template>

<script>
    export default {
        data: function(){
            return{
                name: '',
                image: '',
                body: '',
                category_id: '',
                price: ''
            }
        },
        methods:{
            AddThisServices: function(){
                const formdata = new FormData();
                formdata.append('name', this.name);
                formdata.append('image', this.$els.image.files[0]);
                formdata.append('body', this.body);
                formdata.append('category_id', this.category_id);
                formdata.append('price', this.price);
                this.sendData(formdata);
            },
            sendData: function(){
                this.$http.post('/addServices', formdata).then(function(response){

                }, function (response){

                });
            }
        }
    }
</script>

我正在等待知道问题出在哪里，因为我是 laravel 的新手，我已经搜索了很多关于它的内容，但我找不到任何问题，请帮帮我！

app.js

require('./bootstrap.js');

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import VueResource from 'vue-resource';
Vue.use(VueResource);

Vue.http.headers.common['X-CSRF-TOKEN'] = document.getElementById('_token').getAttribute('value');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

const AddServices = require('./components/services/addservices.vue');
const MyServices = require('./components/services/myservices.vue');
const IncomeOrders = require('./components/orders/incomeorders.vue');
const SendOrders = require('./components/orders/sendorders.vue');

const router = new VueRouter({
    routes: [
        { path: '/', component:{ template: "<p>home</p>"} },
        { path: '/AddServices', component: AddServices },
        { path: '/IncomeOrders', component: IncomeOrders },
        { path: '/SendOrders', component: SendOrders }
    ]
});
const app = new Vue({ router }).$mount('#app')

Answer 1

在您的路线中添加/

Route::post('/addServices','Services/ServicesController@createServices');

我建议现在将此路由作为此 api 放入您的 api.php 并调用为 /api/addServices，然后在将来使用带有令牌的 auth:api

Answer 2

也许这会有所帮助：

<form class="form-vertical" v-on:submit.prevent="AddThisServices()">
    <div class="form-group">
        <label for="name" class="label-control">اسم الخدمة</label>
        <input type="text" name="name" id="name" v-model="name" class="form-control">
    </div>
    <div class="form-group">
        <label for="image" class="label-control">معرض الخدمة</label>
        <input type="file" id="image" v-el:image>
    </div>
    <div class="form-group">
        <label for="body" class="label-control">وصف الخدمة</label>
        <textarea class="form-control" cols="4" rows="10" name="body" id="body" v-model="body"></textarea>
    </div>
    <div class="form-group">
        <label for="category_id" class="label-control">التصنيف</label>
        <select class="form-control" name="category_id" id="category_id" v-model="category_id">
            <option>آختر التصنيف</option>
        </select>
    </div>
    <div class="form-group">
        <label for="price" class="label-control">السعر</label>
        <input type="number" name="price" id="price" class="form-control" v-model="price">
    </div>
    <hr>
    <div class="form-group">
        <input type="submit" name="submit" value="اضافة الخدمة" class="btn btn-primary">
    </div>
</form>