Why If does not work in VUE code?

Hi,

I made a component for uploading images. This component uploads images but if does not work! what is the problem? It should show the upload result after the uploading finished!

 <template>

    <h1>Uploading an Image!</h1>

    <p>This component demonstrates Uploading Image to server.</p>
    <p v-if="!uploadResult"><em>uoloading...</em></p>
    <div v-if="uploadResult">{{this.uploadResult}} </div>

    <div>
        <form>
            <!--<input type="text" value="" v-model="projectName" placeholder="please enter the project name." />-->
            <input type="file" v-on:change="getFile($event)" />
            <button v-on:click="submitForm($event)">Upload</button>
        </form>

    </div>



</template>

   <script>
        
        export default {

            name: "Upload1",
            data() {
                return {

                    
                    selectedFile: " ",
                    uploadResult: " ",
                    fileList: []
                }
            },

            methods: {

                getFile(event) {
                    this.selectedFile = event.target.files[0];
                    console.log(this.file);
                },

                submitForm(event) {
                    event.preventDefault();
                    let formData = new FormData();
                    formData.append("ImageData.File", this.selectedFile);

                    fetch('/api/Image', {
                        method: 'POST',
                        body: formData
                    }).then(resposne => resposne.json())
                        .then(data => {
                            console.log(data);
                            this.uploadResult=  "File " + data.fileName + " successfully uploaded."

                            this.getList();

                        });

                },
                getList() {
                    fetch('api/Image')
                        .then(response => response.json())
                        .then(data => this.fileList = data)

                }
            },
            mounted() {
                this.getList();
            }

        };

    </script>

regards,
Saeed

Just a cursory glance brought me to the above. Though it really shouldn’t matter since you’re passing resposne in. Just thought I’d point it out.

But when I delete this in the template problem solved.
Thanks for your response.

Saeed