提交表单成功后如何调用组件？

Posted 2023-02-23

【中文标题】提交表单成功后如何调用组件？

【英文标题】：How to call component, after submit form success?

【发布时间】：2022-01-02 12:14:48

【问题描述】：

我有一个带有注册表单的页面，提交表单并返回响应成功后，我需要在同一页面中调用另一个组件，而无需重新加载页面，如何做到这一点？

来自表单的方法发布与响应：

axios( 
    method: 'post',
    // url: 'https://reqres.in/api/users',
    url: 'http://127.0.0.1:8000/api/clients',
        data: contactFormData
    ).then( function ( response ) 

    // Handle success.

    console.log( response );

).catch( function ( response ) 

    // Handle error.

    console.log( response );

);

【问题讨论】：

你说的“调用组件”是什么意思？组件通常被加载/渲染但不调用

“调用另一个组件”是什么意思？

例如，当我点击提交按钮时，我希望表单出来并用另一个表单显示另一个组件。

【参考方案1】：

我假设您的意思是在响应成功后“显示”组件？你可以试试：

<template>
  <div class="main-container">
    <div class="register-form">
      ...
    </div>
    <AnotherComponent v-if="isAnotherComponentShow" />
  </div>
</template>

然后在js部分：

export default 
  data() 
    return 
      isAnotherComponentShow: false
    
  ,
  methods: 
    register() 
      axios(
        method: 'post',
        url: 'http://127.0.0.1:8000/api/clients',
        data: contactFormData
      ).then( function ( response ) 
        this.isAnotherComponentShow = true
        // handle res
      ).catch( function ( response ) )
    
  

【讨论】：

我尝试了这个解决方案，它有效，谢谢。