vue.js - 请求后vuejs自动刷新列表
问题描述
我有一个向数据库添加新联系人的表单:
<el-form :model="contact" >
<el-form-item>
<el-input v-model="contact.firstname"/>
</el-form-item>
<el-form-item>
<el-input v-model="contact.lastname"></el-input>
</el-form-item>
<el-button @click="submitForm">Save
</el-button>
</el-form>
我得到所有联系人的列表:
async getContacts() {
this.getcontacts = await ContactApi().get();
this.arraycontacts = this.getcontacts.contactsList;
},
当我提交表单时,我希望列表自动刷新:
<div v-for="contact in arraycontacts">
<div>{{ contact.firstname }}</div>
<div>{{ contact.lastname }}</div>
</div>
我在互联网上看到了一些解决方案,但都使用了我不是的 axios 或 ajax,我该怎么做?
解决方案
在您的提交处理程序中,从服务器获取响应并将其分配给您的联系人列表
methods: {
async submitForm() {
{
this.getcontacts = await ContactApi().submit(this.contact);
this.arraycontacts = this.getcontacts.contactsList;
}
推荐阅读
- td-engine - 如何在TDengine的表列上添加索引?
- javascript - HTML 中的 Javascript 脚本未使用 Angular 12 执行
- cygwin - Cygwin -- 安装 `tcl-devel` 包不提供头文件
- reporting-services - 有没有办法将 3 个单独的整数转换为 SSRS 中的日期?
- android - 如何获取 android 应用程序包名称的托管 App-Store?
- python - 使用 for 循环和字典将一个数据帧操作到另一个数据帧
- sql - 如何提取我们用作分组表的值的当前值?
- cypress - 单击页面上的某处以关闭项目,例如下拉菜单
- java - 阻止应用程序在向上导航时返回登录/注册屏幕
- javascript - 无法在 reactjs 中格式化和分配日期