CODEWITHSUNDEEP
javascriptvue.jsemitprop
toolnin
toolnin

Reputation: 144

Emit an event, wait, and then emit another one in Vue

I have the following events that emit to the parent component and work fine:

this.$emit('sendToParent1', true);
this.$emit('sendToParent2');
this.$emit('sendToParent3');
this.$emit('sendToParent4', true);
this.$emit('sendToParent5', false);

However, I ran into a specific problem which requires me to do emit those 5 events, in that order, but one after another.

//emit this first and wait until the parent has finished what its supposed to do
this.$emit('sendToParent1');
//after the parent is done, we emit the next one from the child
this.$emit('sendToParent2');
//same behavior, once it is emitted to parent and the parent finishes executing, then we emit the next one...
this.$emit('sendToParent3');
//again
this.$emit('sendToParent4', true);
//and again
this.$emit('sendToParent5', false);

I believe that the best approach is to have a prop detecting when an event has finished executing whatever it is supposed to do and then sending a prop to the child, then when that prop is updated the next emit gets executed and so forth and so on. Can someone point me in the best direction of how to solve this?

The Parent has the following component:

<component v-on:sendToParent5="parentFunctionFive" v-on:sendToParent4="parentFunctionFour" v-on:sendToParent1="parentFunctionOne" v-on:sendToParent2="parentFunctionTwo" v-on:sendToParent3="parentFunctionThree"></component>

The Parent has the following methods:

         parentFunctionOne: function() {
                axios.get('/api/do_something-1/')
                .then((res)=>{
                    this.something1 = res.data;
                })
                .catch((error)=>{
                    console.log(error);
                });
            },

         parentFunctionTwo: function() {
                axios.get('/api/do_something-2/')
                .then((res)=>{
                    this.something2 = res.data;
                })
                .catch((error)=>{
                    console.log(error);
                });
            },

           parentFunctionThree: function() {
                axios.get('/api/do_something-3/')
                .then((res)=>{
                    this.something3 = res.data;
                })
                .catch((error)=>{
                    console.log(error);
                });
            },

       parentFunctionFour: function(passed_value) {
            //changing the value of a variable in data
            this.trueOrFalse = passed_value;
        },
        parentFunctionFive: function(passed_value) {
             //changing the value of a variable in data
            this.valuePassed = passed_value;
        }

Upvotes: 0

Views: 2046

Answers (2)

Orkhan Alikhanov
Orkhan Alikhanov

Reputation: 10070

It would easier for us to answer if you explained what your ultimate goal is (see XY problem), but from the information that you provided I think proper way would be to pass a function called next as the event param and trigger it when the work is done which will make the process to continue to the next stage.

this.$emit('sendToParent1', {
 value: true,
 next: 
  () => this.$emit('sendToParent2', {
       value: false,
       next: () => this.$emit('sendToParent3', false);
     })
});

parentFunctionOne: function({value, next}) {
  axios.get('/api/do_something-1/')
    .then((res)=>{
        this.something1 = res.data;
        next() // proceed
    })
    .catch((error)=>{
        console.log(error);
    });
},

parentFunctionTwo: function({value, next}) {
  axios.get('/api/do_something-2/')
    .then((res)=>{
        this.something2 = res.data;
        next() // proceed
    })
    .catch((error)=>{
        console.log(error);
    });
},

parentFunctionThree: function() {
  axios.get('/api/do_something-3/')
    .then((res)=>{
        this.something3 = res.data;
    })
    .catch((error)=>{
        console.log(error);
    });
},

Upvotes: 1

mahmed nabil
mahmed nabil

Reputation: 366

you should rethink about the way you implement the component i think you could try emit one event with all the information you need and in the parent call the appropriate function.

if you want to implement it in this way you could us a variable that you send with event and increment it every time an event has occurred and in the parent track that variable and execute the event in the right order like in the http protocole

Upvotes: 0

Related Questions