Apologies for any language barriers or inaccuracies in my English.
I have a single component designed specifically for image uploads. It is currently being utilized in two forms: an add form and an edit form. In the edit modal, the Image URL is passed as a prop like so:
<ua-single-upload :propsImage="editSingleImage" @uploadImage="addSingleImage = $event"></ua-single-upload>
The functionality is working well, displaying the image as expected:
https://i.sstatic.net/0pwAO.png
However, upon attempting to reload a new photo, an error message appears stating: "[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "propsImage""
https://i.sstatic.net/5YWvc.jpg
Furthermore...
The component fails to function properly with the ADD FORM. Upon selecting an image, it does not show or upload... I am seeking assistance from fellow developers.
My goal is to have a component that allows both adding a new image and updating an existing one.
Below are the codes for my Component:
<template>
<div class="singleImageUpdate p-4">
<div class="p-4">
<h4>Select Cover Photo</h4>
</div>
<div class="p-4">
<input
type="file"
name="fileUrl"
id="file"
ref="fileInput"
@change="onFileChange" />
<label for="file">Add New Photo</label>
<button
class="ml-4"
type="button"
v-if="this.propsImage != null"
@click="onFileDelete"> Remove Photo </button>
<button
class="ml-4"
type="button"
v-else
disabled
@click="onFileDelete"> Remove Photo </button>
</div>
<div class="p-4 mt-4">
<small v-if="this.propsImage">
The photo has not been cropped, it is for representation purposes only.
</small>
<img
class="mt-4 shadow-lg"
v-if="this.propsImage"
:src="propsImage" />
</div>
</div>
</template>
<script>
export default{
data(){
return{}
},
props: {
propsImage: String
},
methods: {
onFileChange(event) {
const file = event.target.files[0];
this.propsImage = URL.createObjectURL(file);
this.$emit("updateSingleImage", 1);
this.$emit("uploadImage",event.target.files[0]);
},
onFileDelete() {
this.propsImage = "";
const input = this.$refs.fileInput;
input.type = "text";
input.type = "file";
this.$emit("updateSingleImage", 0);
this.$emit("uploadImage", null);
},
}
}