Modify child component prop/data in parent's event handler

Question

I am using vue.js 2 and ant design. I encountered such an issue when trying to change the loading state of a button in a modal, which is in an embedded component. Here is a similar example:

Code of modal component:

Modal.vue

<template>
     <a-button :loading="loading" @click="onSubmit">Submit</a-button>
</template>
<script>
export default {
    data(){
        return {
            loading: false
        }
    },
    methods: {
        onSubmit(){
            this.$emit('submit')
        }
    }
}
</script>

Index.vue

<modal
 @submit="submit" />
<script>
export default {
    methods: {
        submit(){
            await axios.create(blabla...) //some async api call
        }
    }
}
</script>

Two failed approach:

1. Set the value of loading before and after $emit in onSubmit. It won't wait for the async request to finish.
2. Make loading a prop of Modal component and change it in the event handler. Nothing happens.

The only workable I have found so far is to create a method like setLoading in child component, pass that to the event handler as a parameter and call it. I was wondering if there is a more succinct way and what is the mechanism behind these.

Answer 1

you should pass the loading state as props. and add async before submitting the method. don't know why you mention failed cases. hard to tell without looking in that code. but try again with this code. maybe there are errors. so wrap in a try-catch block when you fetch details.

<modal
 @submit="submit" :loading="loading" />
<script>
export default {
    data(){
        return {
         loading: false,
        }
    }
    methods: {
      async  submit(){      // add async keyword
             this.loading = true
             try{           // use try-catch block. see errors if there are any.
              await axios.create(blabla...) //some async api call
             }
              catch(error){
                   console.log(error.response)
              }   
             this.loading = false 
            
        }
    }
}
</script>

Modal.vue

<template>
     <a-button :loading="loading" @click="onSubmit">Submit</a-button>
</template>
 <script>
    props: {
      loading: Boolean
     }
 </script>