如何在Laravel中使用Vue.js构建编辑表单

问题描述 投票：0回答：1

正如主题所述，我想在Laravel中使用vue.js制作一个编辑表单，该表单允许用户查看每个数据的当前值并根据需要进行编辑。我想显示“ repair_ticket”的值，即“ request_subject”，“ request_details”和“ before_photo”，并允许用户编辑这些值。

在刀片视图中，我设置了“ multi-editor”包含id =“ app”来加载vue.js模板，并使用'：repair_ticket'发送对象'repair_ticket'。这是代码：

<div id="app" class="flex items-center justify-center font-inter">
     <multi-editor :repair_ticket="{{ json_encode($repair_ticket) }}"></multi-editor>
</div>

要访问此编辑页面，用户必须转到'../ irepair / edit-form / {id}'。

在vue.js中，我根据'repair_ticket'的数据将内容分为3部分

对于'request_subject'和'request_details'是相似的，我将输入标签与v-model =“ fd.request_XXX”一起使用，并使用'mount（）'执行'selectCurrentData'函数，以便分配'fd .request_XXX'。

对于最后一个； “ before_photo”是照片路径的数组，我使用v-if验证了它的长度并在侧面显示带有删除按钮的预览照片。这将允许用户删除用户不再需要的当前照片。为此，我使用了'removed_photos'来删除照片用户的照片路径。另外，用户可以通过多次浏览上传更多照片（谢谢@tamrat）。如果用户要添加更多照片，我使用了“ added_photos”来保留照片路径。

[编辑后，用户将单击上载按钮，这三个变量加上'repair_ticket_id'将存储在'fdUpload'中，并通过'axios.put'发送请求。在控制器中进行更新处理后，它必须返回到我在axios的'.then'中用'window.location'设置的页面。

这是我的vue.js中的代码：

<template>
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card-header">Edit Form</div>

            <div class="card-body">
                <form class="vue-form" @submit.prevent="submit">
                    <fieldset>
                        <div class="form-group row rounded">
                            <label class="col-md-4 col-form-label text-md-right" for="request_subject">Request Subject<span style="color: red;">*</span></label>
                            <input class="col-md-6 form-control" type="text" name="request_subject" id="request_subject" required v-model="fd.request_subject">
                        </div>

                        <div class="form-group row rounded">
                            <label class="col-md-4 col-form-label text-md-right" for="request_details">Request Details</label>
                            <textarea class="col-md-6 form-control" name="request_details" id="request_details" v-model="fd.request_details" placeholder="Leave your request details here..."></textarea>
                        </div>

                        <div class="form-group row">
                            <label class="col-md-4 col-form-label text-md-right" for="photos">Photo</label>
                            <input class="col-md-6 form-control" ref="photoUploadInput" type="file" multiple @change="handleFileSelect" style="display: none;">

                            <div class="col-md-6">
                                <div class="flex justify-between items-center mb-6">
                                    <div class="leading-tight">
                                        <div v-if="fd.current_photos.length == 0">
                                            <p>No Photo</p>
                                        </div>

                                        <div v-if="fd.current_photos.length > 0 || fd.added_photos.length > 0">
                                            <p>You have selected {{ fd.current_photos.length + fd.added_photos.length }} photo(s)</p>
                                        </div>
                                    </div>
                                    <button @click="clickInput" type="button" class="px-6 py-2 font-semibold rounded">Choose More Photo(s)</button>
                                </div>


                                <div v-if="fd.current_photos.length > 0" class="-my-2 -mx-2 flex">
                                    <div v-for="(photo, index) in fd.current_photos" :key="`thumb-${index}`">
                                        <div class="p-1">
                                            <div class="relative d-flex">
                                                <div class="inset-0" style="vertical-align: middle;">
                                                    <img class="object-cover" style="width: 50%;" v-bind:src="'../' + photo" alt="Selected Photo">
                                                    <button @click="removeCurrentPhoto(index)" type="button" class="rounded">
                                                        <i class="fas fa-minus" style="color: red;"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div v-if="fd.added_photos.length > 0" class="-my-2 -mx-2 flex">
                                    <div v-for="(photo, index) in fd.added_photos" :key="`thumb-added-${index}`">
                                        <div class="p-1">
                                            <div class="relative d-flex">
                                                <div class="inset-0" style="vertical-align: middle;">
                                                    <img class="object-cover" style="width: 50%;" v-bind:src="photo.preview" alt="Selected Added Photo">
                                                    <button @click="removeNewPhoto(index)" type="button" class="rounded">
                                                        <i class="fas fa-minus" style="color: red;"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-group row mb-0 justify-content-center">
                            <button @click="upload()" type="button" class="px-6 py-2 font-semibold rounded">Edit Form</button>
                        </div>
                    </fieldset>
                </form>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios';

export default {
    props: ['repair_ticket'],

    data() {
        return {
           fd: {
                repair_ticket_id: '',
                request_subject: '',
                request_details: '',
                current_photos: [],
                removed_photos: [],
                added_photos: [],
           }            
        }
    },
    mounted() {
        // console.log(this.repair_ticket)
        this.selectCurrentData(this.repair_ticket);
    },
    methods: {
        selectCurrentData(repair_ticket){
            // console.log(repair_ticket.request_subject);
            this.fd = {
                repair_ticket_id: repair_ticket.id,
                request_subject: repair_ticket.request_subject,
                request_details: repair_ticket.request_details,
                current_photos: repair_ticket.before_photo,
                removed_photos: [],
                added_photos: [],
            };
            console.log(this.fd)
        },
        handleFileSelect(e) {
            Array.from(e.target.files).forEach(file => {
                const reader = new FileReader()
                reader.onload = () => {
                    this.fd.added_photos.push({
                        preview: reader.result,
                        file
                    })
                }
                reader.readAsDataURL(file)
            })
        },
        clickInput() {
            this.$refs.photoUploadInput.click()
        },
        upload() {
            const dt = new DataTransfer()

            console.log(this.fd.current_photos)
            console.log(this.fd.removed_photos)
            console.log(this.fd.added_photos)

            this.fd.added_photos.forEach(photo => dt.items.add(photo.file))

            const fdUpload = new FormData()
            fdUpload.append('repair_ticket_id', this.fd.repair_ticket_id)
            fdUpload.append('request_subject', document.getElementById('request_subject').value)
            fdUpload.append('request_details', document.getElementById('request_details').value)
            fdUpload.append('removed_photos', this.fd.removed_photos)

            this.fd.added_photos.forEach((photo, index) => fdUpload.append('photo-added-' + index, photo.file))

            console.log(fdUpload);

            axios.put('re-upload/' + this.fd.repair_ticket_id, fdUpload, {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            })
                .then(response => { 
                    console.log(response); 
                    window.location = '../view-all'; 
                })
                .catch(err => console.log(err))

        },
        removeCurrentPhoto(index) {
            this.fd.removed_photos.push(this.fd.current_photos[index]);
            this.fd.current_photos.splice(index, 1);
        },
        removeNewPhoto(index) {
            this.fd.added_photos.splice(index, 1);
        }
    }
}
</script>

在web.php
中，我这样设置路由：
Route::put('irepair/edit-form/re-upload/{id}', 'iRepair\RequestFormsController@update');

在控制器中
，我使用此函数来更新值：
public function update(Request $request, $repair_ticket_id)
{
// Update Request Form
}

我发现的问题是，它一直在告诉该错误：PUThttp://127.0.0.1:8000/irepair/edit-form/87405（不允许使用方法）
，我知道这是有道理的，因为我尚未为此设置route :: put。这是我设置为显示编辑表单页面的内容：
Route::get('irepair/edit-form/{id}', 'iRepair\RequestFormsController@edit');

此外，这不是我希望用户提交表单后将其重定向到的页面。 
我在这个问题上坚持了好几天，我不知道为什么它会一直重定向到自身。任何人都有任何建议，如果有，请在下面留下您的答案。将会非常感激。

正如主题所述，我想在Laravel中使用vue.js制作一个编辑表单，该表单允许用户查看每个数据的当前值并根据需要进行编辑。我想显示'repair_ticket'的值，其中...

javascript laravel forms vue.js edit
1个回答
0
投票

问题出在路线上。

[当它应为get，post或put时，您正在接受patch。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.