动态更改文本直到后端响应

Question

我使用npm创建了vuejs项目。这是App.vue：

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

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

这是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>

它在编译时说：

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://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

但是我需要根据后端响应显示动态messagae：

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

这是main.js：

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

也当我在helloworld.vue中的props下添加数据时，像这样：

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

        },

它说：

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

npm创建后，我没有更改或添加任何文件。我应该创建一个新文件吗？

Answer 1

您有道具：