Это мой второй вопрос в переполнении стека. Как упоминалось в предыдущем, я работаю над своим проектом, который позволяет пользователям загружать много изображений одновременно. Каждое изображение будет показано в виде набора миниатюр. Перед загрузкой пользователи могут удалять изображения, которые он / она не хочет. Наконец, все выбранные и предварительно просмотренные изображения будут сохранены с использованием данных Vue. js. Спасибо @tamrat за его великолепное руководство.
На этот раз я хочу создать страницу редактирования. Он покажет текущую стоимость каждого «Ремонтного билета», такого как «тема запроса», «детали запроса» и его «фотографии». Как всегда, вы можете редактировать эти данные и обновлять последние данные. Я решил использовать Vue. js, которые позволяют пользователям хранить много изображений. Тем не менее, я очень новичок в использовании Vue. js в Laravel.
. На данный момент я пытаюсь передать переменную '$ 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}}" 'во входных данных и текстовой области соответственно. Однако, похоже, что-то не так. Теперь я не могу показать текущие данные этих двух.
Для последнего значения, которое является файлом пути фотографий 'repair_ticket-> photos', я пытаюсь отобразить текущий набор фотографий, но я не знаю, как передать переменную '$ repair_ticket' и отобразить ее в View, используя 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.
У кого-нибудь есть предложения по этому поводу? Пожалуйста, оставьте свои ответы ниже.