عمالقة vuejs + laravel + bootstrap-Vue مشكلة حذف أو تعديل بيانات في الجدول

[sniperadmin]

المشكلة هي طريقة برمجة حذف المستخدم بدون التأثير على المكتبات التي استخدمها (Bootstrap-vue // vForm vue)…
شرح الحالة مرفق بالفيديو + نسخة من ال source code المتعلق بالمشكلة

VueJs HTML Code

 <!-- Main table element -->
<b-table class="text-center"
    id="my-table"
    show-empty
    bordered="bordered"
    stacked="md"
    :items="users"
    :fields="fields"
    :filter="filter"
   @filtered="onFiltered"
>
                        
                        <template slot="actions">
                            <b-button variant="outline-primary">
                                <i class="fas fa-edit "></i>
                            </b-button>
                            <b-button variant="outline-danger" @click="deleteUser">
                                <i class="fas fa-trash"></i>
                            </b-button>
                        </template>

 </b-table>

Scripts

data() {
            return {
                title: 'users management',

                users: [],
                form: new Form({
                    name: '',
                    email: '',
                    password: '',
                    type: '',
                    bio: '',
                    photo: ''
                }),
                fields: [
                    { key: 'id', label: 'ID', sortable: true },
                    { key: 'name', label: 'Name', sortable: true },
                    { key: 'email', label: 'Email', sortable: true, class: 'text-center' },
                    { key: 'type', label: 'User Type', sortable: true },
                    { key: 'created_at', label: 'Registered at', sortable: true,
                        formatter: (value, event) => {
                             return moment(value).format('MMMM Do YYYY');
                        }
                    },
                    { key: 'actions', label: 'Actions', sortable: true }
                ],
                filter: null,
                bordered: true
            }
        },
methods: {
     deleteUser(id) {
           // send ajax request
           this.form.delete('api/user' + id).then(() => {}).catch(() =>{});

}

Bootstap-Vue Documentation part
vForm plugin documentation

[sniperadmin]

فيديو تحديث رقم #1

تم حل مشكلة الفرونت اند
المشكلة الحالية هي:

HTTP405: BAD METHOD - The HTTP verb used is not supported.
(XHR)DELETE - http://localhost:8000/api/user26

HTTP/1.0 405 Method Not Allowed
Host: localhost:8000
Date: Thu, 01 Aug 2019 17:14:42 GMT
Connection: close
X-Powered-By: PHP/7.2.18
Allow: GET, HEAD
Cache-Control: no-cache, private
Date: Thu, 01 Aug 2019 17:14:42 GMT
Content-Type: application/json

[sniperadmin]

تحديث#2

بعد طباعة الامر php artisan route:list نتج الآتي:

DELETE    | api/user/{user}        | user.destroy     | App\Http\Controllers\API\UserController@destroy                        | api

وبناء عليه تم تعديل صيغة رابط الـrequest ليكون بنفس الشكل
النتيجة الحالية:
الrequest يتم ارساله بشكل ناجح بدون أخطاء ولكن لا يتم مسح أي شيء

Request URL:http://localhost:8000/api/user/26
Request method:DELETE
Remote address:127.0.0.1:8000
Status code:
200
Version:HTTP/1.1
Referrer Policy:no-referrer-when-downgrade

[sniperadmin]

تم الحل!

[YaserAlnajjar]

اهلا نصر

ماهو الحل للمشكلة؟

هل جربت استعمال axios بدل this.form ؟

[sniperadmin]

السر يكمن في مدى تطابق رابط الrequest في الفرونت مع نظام routes في الباك اند
في بعد الأحيان نحتاج للتأكد من أن قيمة الid تكون string
ولذلك استخدمت JSON.stringify()

كلا من axios و this.form تعملان بشكل رائع جدا

الاستنتاج: في حالة الحصول على error HTTP405 ، يمكننا التحقق من الroutes الموجودة بالباك اند أولا
ثم التأكد من اننا ندخل الرابط المطابق لنوع الrequest

استفدت كثيرا من هذه التجربة وخاصة مع bootstrapVue framework

[YaserAlnajjar]

رائع جداً… ما زلت تسبق الجميع مع Vue

[sniperadmin]

أحببت الفريم ورك صراحة يوفر الكثير والكثير