Change dynamically text up to backendresponse - vue.js

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>