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

Question

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

来自表单的方法 post 响应：

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 );

});

Answer 1

我假设你的意思是 'reveal' 响应成功后的组件？您可以尝试以下：

<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 ) {})
    }
  }
}

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

How to call component, after submit form success?

javascript

ajax

vue.js

vue-component

nuxt.js