如何使用 vue-resource 在表单提交上添加预加载器和成功消息 [英] How to add preloader and success message on form submit using vue-resource
问题描述
如何使用 vue-resource 完成以下任务:
- 在获取数据时包含预加载文本 Loading... 或 gif 图像来自服务器.
- 在表单提交时显示成功消息.
一种方法是:
<div><div class="loader" v-if="loader"></div><div>//使用您希望的逻辑显示 fetchedData，例如 v-for.....<表格>//你的表单输入<button @click.prevent="submit">提交</button></表单>
</模板><脚本>导出默认{数据(){返回{装载机:假，获取数据:空}},安装(){this.loader = true;this.$httpget('your_url').then(响应 => {this.fetchedData = 响应；this.loader = false;},错误=>{});},方法:{提交(){this.loader = true;this.$http.post('your_url', {your_body}).then(响应 => {this.loader = false;},错误=>{alert('表单未提交');});}},}<样式范围>装载机{位置:绝对；左:50%；顶部:50%；变换:翻译(-50%，-50%)；边框:10px 实心 #f3f3f3;/* 浅灰色 */边框顶部:16px 实心 #3498db；/* 蓝色 */边界半径:50%；宽度:75px；高度:75px；动画:自旋 2s 线性无限；}@关键帧旋转{0% { 变换:旋转(0度)；}100% { 变换:旋转(360 度)；}}</风格>
这是有效的fiddle
How to accomplish below task using vue-resource:
- Include preloader text Loading... or gif image when fetching the data from the server.
- Show success message on form submit.
One way of doing this is :
<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>
Here is the working fiddle
这篇关于如何使用 vue-resource 在表单提交上添加预加载器和成功消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
