vue emit event and receive in parent component

Question

Hi i have two component , I get response in one component and need to pass and push in the array of parent component. Below is my code. I have not received response. In Userstatuscomponent.vue I have few methods and whatever response I get there I want to pass this to UserComponent.vue and push it in users[] array. I think I have done something wrong. Please help me. UserComponent.vue

<template>
<div>
        <Status v-on:updateStatus="receiveResponse(userData)"></Status >
    <div class="card" >
        <div class="card-header">
            <div class="card-body" v-for="user in users.data" >

            </div>
        </div>
    </div>
</div>
</template


<script type="application/javascript">
import Status from '../components/UserstatusComponent.vue' 

export default {
    data() {
        return {
            users: [],
        };
    },
    created() {
        this.getResult();
    },

    components: {
        Filter
    },
    methods: {
        getResult() {
            axios
                .get("/api/result")
                .then(response => {
                   
                        this.users = response.data;
                   
                })
                .catch(error => console.log(error));
        },
        receiveResponse(userData){
            this.users =  userData
        },
//HERE I HAVE RECEIVED THE EVENT and update users array
        receiveResponse(user){
            this.users = user
        },
 
    }
};
</script>
Now I have some method in UserStatusComponent and I want to pass the response from this component to UserComponent.vue

UserstatusComponent.vue
<template>
            <div class="">
                        <a
                            @click.prevent="updateOne"
                            >update one</a
                        >
                        <a
                            @click.prevent="updateTwo"
                          
                            >update two</a
                        >
                       
                       
                    </div>
                </div>
            </div>
</template>

<script>
export default {
    data(){
        return{
            
        }
    },
    updateOne() {
            axios
                .get("/api/result", {
                    params: {
                        status: "bad"
                    }
                })
                .then(response => {
                    this.$emit('updateStatus',response.data);
                });
        },
        updateTwo() {
            axios
                .get("/api/result", {
                    params: {
                        stauts: "good"
                    }
                })
                .then(response => {
                    this.$emit('updateStatus',response.data);
                });
        },
        
}
</script>

scar-2018 · Accepted Answer · 2021-07-29 00:07:03Z

1

When you want to pass data through emit, in the parent component, you don't have to put parameters in the function. Here are some code updates(not tested)

v-on:updateStatus="receiveResponse"

updateStatus function will have parameters, though which is what child component passed through $emit.

receiveResponse(userData){
  this.users =  userData
}

<div class="card-body" v-for="user in users.data" > There should be iterable in v-for. How about v-for="user in users"?

answered Jul 29, 2021 at 0:07

scar-2018

5282 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

David Over a year ago

does v-on: here:v-on:updateStatus="receiveResponse" listen the event?

Chris Wong Over a year ago

There is a demo.

scar-2018 Over a year ago

@David, yes. It listens event and obtains data emitted from child component

Juan Eizmendi · Accepted Answer · 2021-07-29 02:32:23Z

0

in UserComponent you have repeated the method receiveResponse.

And in UserStatusComponent you need to wrap up the functions

data() { },
methods: {
   updateOne() {...}
   updateTwo() {...} // this one is also repeated method
}

Update with minimum example

Parent Component

<template>
    <Status v-on:updateStatus="receiveResponse" />
</template

<script>
import Status from '../components/UserstatusComponent.vue' 

export default {
    components: {
        Status
    },
    methods: {
        receiveResponse(userData){
            /* code */
        },
     }
};
</script>

Child Component

<template>
    <a @click.prevent="updateOne">update one</a>
</template

<script>
export default {
    emits: ['updateStatus'], // This will prevent a warning
    methods: {
        updateOne(){
            this.$emit('updateStatus', data);
        },
     }
};
</script>

edited Jul 29, 2021 at 2:32

answered Jul 29, 2021 at 0:10

Juan Eizmendi

1,1649 silver badges11 bronze badges

2 Comments

David Over a year ago

hi methods name are different, its now updated. my main question is how to receive event send from one component to another component based on my questions.Thanks

Juan Eizmendi Over a year ago

after that changes, it should be sending the msg, UserStatusComponent emits updateStatus and its catch with v-on:updateStatus and call receiveResponse() (which btw you stil have duplicated, one def of receiveResponse will do)

tony19 · Accepted Answer · 2022-07-15 05:21:40Z

0

I think it's simply that the event-listener is in camelcase, while it should be in kebab-case (at least when using DOM-Templates). Try it like this:

<Status v-on:update-status="receiveResponse(userData)"></Status >

In other words: Vue automatically translates the camel-cased updateStatus event emit to kebab-cased update-status, thus you can emit with camel-case, but can't listen with camel-case. See: https://v3.vuejs.org/guide/component-custom-events.html#event-names https://v3.vuejs.org/guide/component-props.html#prop-casing-camelcase-vs-kebab-case

For VueJS 2 use kebab-case only (in emit & listener), as VueJS 2 does NOT translate camel- to kebab-case. VueJS 2 will transform any event-listener in the DOM to lower case. More on this: https://v2.vuejs.org/v2/guide/components-custom-events.html

edited Jul 15, 2022 at 5:21

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jul 29, 2021 at 2:14

Sebastian Börgers

314 bronze badges

Collectives™ on Stack Overflow

vue emit event and receive in parent component

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related