如何使用 vue-resource 在表单提交上添加预加载器和成功消息

Question

如何使用 vue-resource 完成以下任务：

1. 从服务器获取数据时包括预加载器文本 Loading... 或 gif 图像。
2. 在表单提交上显示成功消息。

Answer 1

这样做的一种方法是：

<template>

    <div>
        <div class="loader" v-if="loader"></div>
        <div>
            //display fetchedData using logic you wish like v-for.....
        </div>
        <form>
            //your form inputs
            <button @click.prevent="submit">Submit</button>
        </form>
    </div>    

</template>

<script>


    export default{
        data(){
            return{
                loader: false,
                fetchedData: null
            }
        },
        mounted(){
            this.loader = true;
                this.$httpget('your_url')
                    .then(response => {
                        this.fetchedData = response;
                        this.loader = false;
                    },err => {
                    });
        },
        methods:{

            submit(){
                this.loader = true;
                this.$http.post('your_url', {your_body})
                    .then(response => {
                        this.loader = false;
                    },err => {
                        alert('form not submitted');
                    });
            }
        },

    }
</script>

<style scoped>
    loader {
        position: absolute;
        left:50%;
        top:50%;
        transform: translate(-50%, -50%);
        border: 10px solid #f3f3f3; /* Light grey */
        border-top: 16px solid #3498db; /* Blue */
        border-radius: 50%;
        width: 75px;
        height: 75px;
        animation: spin 2s linear infinite;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
</style> 

这是工作小提琴