这是我在 Stack Overflow 中的第二个问题。正如前文所述，我正在开发我的项目，该项目允许用户一次上传许多图像。每个图像将显示为一组缩略图。在上传之前，用户可以删除他/她不想要的图像。最后，所有选择和预览的图像都将使用来自 Vue.js 的数据进行存储。感谢@tamrat 在这方面的出色指导。
这一次，我想创建一个编辑页面。它将显示每个“维修单”的当前值，例如“请求主题”、“请求详细信息”及其“照片”。与往常一样，您可以编辑这些数据并更新最新数据。我决定使用 Vue.js，它允许用户存储许多图像。但是，我对在 Laravel 中使用 Vue.js 很陌生。
现在，我正在尝试从控制器传递一个变量“$repair_ticket”，以查看我使用 Vue.js 设置的编辑表单。我想显示此“$repair_ticket”的当前数据，即“$repair_ticket->request_subject”、“$repair_ticket->request_details”和“repair_ticket->photos”。
对于前两个值；这是'$repair_ticket->request_subject'和'$repair_ticket->request_details'，我正在尝试使用'v-bind:value="@{{$repair_ticket->request_subject}}"'和'v-bind： value="@{{$repair_ticket->request_details}}"' 在 input 和 textarea 中相应。不过，好像有什么地方不对。现在，我无法显示这两个的当前数据。
对于作为照片“repair_ticket->photos”路径文件的最后一个值，我试图显示当前的照片集，但我不知道如何传递变量“$repair_ticket”并将其显示在使用 Vue.js 查看
这是我的 Vue.js 中的部分代码：
<template>
<div class="row justify-content-center">
<div class="col-md-12">
<div class="card-header">Edit Request 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="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="request_details" placeholder="Please 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="photos.length > 0">
<p>You have selected {{ photos.length }} photo(s)</p>
</div>
</div>
<button @click="clickInput" type="button" class="px-6 py-2 font-semibold rounded">Please Choose Your Photo(s)</button>
</div>
<div v-if="photos.length" class="-my-2 -mx-2 flex">
<div v-for="(photo, index) in 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%;" :src="photo.preview" alt="Your Selected Photo">
<button @click="removePhoto(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" :disabled="!request_subject.length" :class="!request_subject.length ? 'cursor-not-allowed bg-gray-600 hover:bg-gray-600' : 'bg-indigo-500 hover:bg-indigo-600'" class="px-6 py-2 font-semibold rounded">Edit Request Form</button>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
request_subject: "",
request_details: "",
photos: []
}
},
methods: {
handleFileSelect(e) {
Array.from(e.target.files).forEach(file => {
const reader = new FileReader()
reader.onload = () => {
this.photos.push({
preview: reader.result,
file
})
}
reader.readAsDataURL(file)
})
},
clickInput() {
this.$refs.photoUploadInput.click()
},
upload() {
const dt = new DataTransfer()
this.photos.forEach(photo => dt.items.add(photo.file))
const fd = new FormData()
fd.append('request_subject', document.getElementById('request_subject').value);
fd.append('request_details', document.getElementById('request_details').value);
this.photos.forEach((photo, index) => fd.append(`photo-${index}`, photo.file))
axios.post('upload', fd, {
headers: {
'Content-Type': 'multipart/form-data'
}
})
// .then(response => console.log(response))
.then(response => {
console.log(response);
window.location = 'view-all';
})
.catch(err => console.log(err))
},
removePhoto(index) {
this.photos.splice(index, 1);
}
}
}
</script>
我不确定这是否是正确的做法。如果有人有任何建议，请在下面留下您的答案。
更新：我在 Vue.js 中更新了我的代码，如下所示：
<template>
<div class="row justify-content-center">
<div class="col-md-12">
<div class="card-header">Edit Request 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">ชื่อเรื่อง<span style="color: red;">*</span></label>
<input class="col-md-6 form-control" type="text" name="request_subject" id="request_subject" required :value="repair_ticket['request_subject']">
</div>
<div class="form-group row rounded">
<label class="col-md-4 col-form-label text-md-right" for="request_details">รายละเอียด</label>
<textarea class="col-md-6 form-control" name="request_details" id="request_details" :value="repair_ticket['request_details']"></textarea>
</div>
<div class="form-group row">
<label class="col-md-4 col-form-label text-md-right" for="photos">Photos</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="photos.length > 0">
<p>You have selected {{ photos.length }} photo(s)</p>
</div>
</div>
<button @click="clickInput" type="button" class="px-6 py-2 font-semibold rounded">Please choose photo(s)</button>
</div>
<div v-if="photos.length" class="-my-2 -mx-2 flex">
<div v-for="(photo, index) in 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%;" :src="photo.preview" alt="Selected Photo">
<button @click="removePhoto(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 Request Form</button>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['repair_ticket'],
mounted() {
console.log(this.repair_ticket)
},
data() {
return {
repair_ticket_id: this.repair_ticket.id,
request_subject: "",
request_details: "",
photos: []
}
},
methods: {
handleFileSelect(e) {
Array.from(e.target.files).forEach(file => {
const reader = new FileReader()
reader.onload = () => {
this.photos.push({
preview: reader.result,
file
})
}
reader.readAsDataURL(file)
})
},
clickInput() {
this.$refs.photoUploadInput.click()
},
upload() {
const dt = new DataTransfer()
this.photos.forEach(photo => dt.items.add(photo.file))
const fd = new FormData()
fd.append('repair_ticket_id', this.repair_ticket_id);
fd.append('request_subject', document.getElementById('request_subject').value);
fd.append('request_details', document.getElementById('request_details').value);
this.photos.forEach((photo, index) => fd.append(`photo-${index}`, photo.file))
axios.put('re-upload/' + this.repair_ticket.id, fd, {
headers: {
'Content-Type': 'multipart/form-data'
}
})
// .then(response => console.log(response))
.then(response => {
console.log(response);
window.location = 'view-all';
})
.catch(err => console.log(err))
},
removePhoto(index) {
this.photos.splice(index, 1);
}
}
}
</script>
我已经为此设置了如下路线：
Route::put('irepair/edit-form/re-upload/{id}', 'iRepair\RequestFormsController@update');
目前，我可以显示'request_subject'和'request_details'的当前数据，但仍然无法显示该维修票的当前照片。此外，我仍然坚持将数据发送到控制器并根据更改的内容更新数据库中的数据。它一直说错误405。
有人对此有什么建议吗？请在下面留下您的答案。
您可以使用 Vue 道具。希望这对你有帮助
内部 Laravel 刀片
<edit-ticket :repair-ticket="{{ json_encode($repair_ticket) }}"></edit-ticket>
组件视图
export default {
props:['repairTicket'],
mounted() {
console.log(this.repairTicket)
}
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句