CODEWITHSUNDEEP
javascriptvue.js
Harinder Kaur
Harinder Kaur

Reputation: 91

VueJs: How to pass a 'computed function' value from child component to the parent component using $emit(optionalPayload) and $on?

I am new to VueJs and I am doubtful about passing the optional payload Could anyone please tell me how to pass the value returned by a computed function in the child component to the parent component using the optional payload.

I want to implement a separate independent search component which returns the search results to all other components. The computed function looks like this:

get computedSports () {
    if (!this.searchModel || this.searchModel.length === 0)
       return this.sports
    else
       return this.fuseSearch.search(this.searchModel)
}

This is how I am trying to pass the value returned by computed function to its parent component in the child template:

@input="$bus.$emit('computed-sports', computedSports)"

In the parent component, this is how I am trying to access the value of the child's computed function: v-on:computed-sports=""
I am not quite sure how to access the value here. Could anyone help me out in this?

Thanks!

Upvotes: 2

Views: 2328

Answers (1)

Roy J
Roy J

Reputation: 43881

The argument to a v-on should be a method or inline function that takes the payload as an argument. For example

v-on:computed-sports="handleComputedSports"

and your method might be defined

handleComputedSports(theValue) {
  console.log("The value is", theValue);
}

There's an example in this section of the documentation. Your emit is fine. The fact that the value comes from a computed makes no difference to anything.

Upvotes: 2

Related Questions