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

【问题标题】：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 );

});

【问题讨论】：

你说的“调用组件”是什么意思？组件通常被加载/渲染但不调用
“调用另一个组件”是什么意思？
例如，当我点击提交按钮时，我希望表单出来并用另一个表单显示另一个组件。

标签： javascript ajax vue.js vue-component nuxt.js

【解决方案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 ) {})
    }
  }
}

【讨论】：

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