Vue JS "PROP MUTATING" for Upload Image

Question

first sorry for my bad English.

I have one component, this component only working for upload image.

I'm running this component to 2 form. First add form, second edit form. Edit modal open and send to props Image URL.

This..

<ua-single-upload :propsImage="editSingleImage" @uploadImage="addSingleImage = $event"></ua-single-upload>

This is so good working. Image:

If I'm reload new photo, working and console give this error: "[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""

AND...

This component not working with ADD FORM. I select image, not showing not uploading... Please help me friends..

I want to be able to add a new image and update the existing one with a component.

This is my Component Codes...

<template>
   <div class="singleImageUpdate p-4">
      <div class="p-4">
         <h4>Kapak Fotoğrafı Seçiniz</h4>
      </div>
      <div class="p-4">
         <input 
            type="file"
            name="fileUrl" 
            id="file" 
            ref="fileInput" 
            @change="onFileChange" />

          <label for="file">Yeni Fotoğraf Ekle</label>

          <button
            class="ml-4"
            type="button"
            v-if="this.propsImage != null"
            @click="onFileDelete"> Fotoğrafı Kaldır </button>


          <button
           class="ml-4"
           type="button"
           v-else 
           disabled 
           @click="onFileDelete"> Fotoğrafı Kaldır </button>
        </div>

        <div class="p-4 mt-4">
          <small v-if="this.propsImage">
              Fotoğraf kırpılmamaktadır, görüntü temsilidir.
          </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);
          },
        }
      }

Tom Tom · Accepted Answer · 2020-06-02T02:24:17

Id say the warning is pretty descriptive, you are mutating the property directly which is a bad practice, since the parent might change the prop value and will therefore overwrite it.

What you should do instead is perhaps:

Create a reactive property inside the data function and use the prop as an initial value:

props: {
  propsImage:string 
}, 
data(){
  return {
    image: this.propsImage
  }
}

or if you want to update image whenever propsImage changes:

watch: {
  propsImage(newValue){
    this.image = newValue
  }
}

or If you want to update the prop in the parent component emit the event

computed: {
  image: {
    get(){
      return this.propsImage
    }, 
    set(newValue)
    {
      this.$emit('update:props-image',newValue)
    }
  }
}

and change the property inside the template of the parent component to <my-component :props-image.sync="myValue" />

Also there is no this context bound to the vue instance in the template is there?

Vue JS "PROP MUTATING" for Upload Image

1 Answers