请求后vuejs自动刷新列表

Question

我有一个向数据库添加新联系人的表单：

<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，而我不是，我可以用什么方式做到这一点？

Answer 1

在您的提交处理程序中，从服务器获取响应并将其分配给您的联系人列表

methods: {
  async submitForm() {
  {
    this.getcontacts = await ContactApi().submit(this.contact);
    this.arraycontacts = this.getcontacts.contactsList; 
  }