Change dynamically text up to backendresponse

Question

I created vuejs project with npm. This is App.vue:

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    HelloWorld
  }
}
</script>

This is helloworld.vue

<template>
    <div class="hello">

        <label>File
            <input type="file" id="file" ref="file" v-on:change="handleFileUpload()"/>
        </label>

        <button v-on:click="submitFile()">Submit</button>



        <span id="error" style="color: red; display: none;">{{message}}</span>
    </div>

</template>
    <script>
        import axios from 'axios';
    
        export default {
            name: 'HelloWorld',
            props: {
                msg: String
            },
            methods: {
      
                submitFile() {
    
                    let formData = new FormData();
    
                    /*
                        Add the form data we need to submit
                    */
                    formData.append('file', this.file); //todo get "file" string from external
    
    
                    /*
                      Make the request to the POST /single-file URL
                    */
                    axios.post('http://localhost:8082/upload/'
                        + this.bank
                        + '/'
                        + this.currency,
                        formData,
                        {
                            headers: {
                                'Content-Type': 'multipart/form-data'
                            }
                        }
                    ).then(function (response) {
                        console.log('SUCCESS!! + response', response);
                        this.message= "successfully uploaded"
                    })
                        .catch(function (response) {
                            console.log('FAILURE!!+ response', response);
                            this.message= "successfully uploaded"
                        });
                }
            }
        }
    
    </script>

It says when it compiles:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Property or method "message" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

but i need to show a dynamic messagae according to backend response:

 <span id="error" style="color: red; display: none;">{{message}}</span>

This is main.js:

new Vue({
  render: h => h(App),
}).$mount('#app')

Also when i add data under props in helloworld.vue, like this:

  export default {
        name: 'HelloWorld',
        props: {
            msg: String
        },
        data: {
            
        },

it says:

error: `data` property in component must be a function (vue/no-shared-component-data) at src\components\HelloWorld.vue:36:9:

I did not change or add any files after npm create. Should i create a new file?

this.message = "successfully uploaded" gives Uncaught (in promise) TypeError: Cannot set property 'message' of undefined

Answer 1

You have props:

props: {
    msg: String
},

But you are using {{message}} instead.

data should be like this (if you need message property):

data(){
    return {
        message: '',
    };
},

Add created method like this (if you need to put your msg props to message):

created(){
    this.message = this.msg;
}

Upd.

Change your code to this (arrow function instead of function) (Upd.2 As mentioned @AJT82 in his answer right before my updates was made):

<script>
    import axios from 'axios';

    export default {
        name: 'HelloWorld',
        props: {
            msg: String
        },
        methods: {

            submitFile() {

                let formData = new FormData();

                /*
                    Add the form data we need to submit
                */
                formData.append('file', this.file); //todo get "file" string from external


                /*
                  Make the request to the POST /single-file URL
                */
                axios.post('http://localhost:8082/upload/'
                    + this.bank
                    + '/'
                    + this.currency,
                    formData,
                    {
                        headers: {
                            'Content-Type': 'multipart/form-data'
                        }
                    }
                ).then((response) => {
                    console.log('SUCCESS!! + response', response);
                    this.message= "successfully uploaded"
                })
                    .catch((response) => {
                        console.log('FAILURE!!+ response', response);
                        this.message= "successfully uploaded"
                    });
            }
        }
    }

</script>