VueJs: Passing the value of a 'computed function' from a child component to its parent component using $emit with an optional payload and $on

Question

VueJs: Passing the value of a 'computed function' from a child component to its parent component using $emit with an optional payload and $on

As a newcomer to VueJs, I find myself unsure about how to pass an optional payload. Can someone guide me on passing the value returned by a computed function from a child component to a parent component using this payload?

I aim to create a standalone search component that can share its results with other components. The computedSports function is as follows:

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

This is my attempt at sending the computed function's value to the parent component in the child template:

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

In the parent component, I am struggling to figure out how to access the child's computed function value: v-on:computed-sports=""
I would appreciate any assistance on how to do this.

Thanks!

javascript vue.js

Answer 1

Answer №1

When using v-on, the argument should be a method or inline function that accepts the payload as an argument. For instance:

v-on:computed-sports="handleComputedSports"

Your method can then be defined like this:

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

An example of this can be found in this documentation section. Your emit statement works correctly, regardless of whether the value is from a computed property.

Answer 2

When using v-on, the argument should be a method or inline function that accepts the payload as an argument. For instance:

v-on:computed-sports="handleComputedSports"

Your method can then be defined like this:

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

An example of this can be found in this documentation section. Your emit statement works correctly, regardless of whether the value is from a computed property.

VueJs: Passing the value of a 'computed function' from a child component to its parent component using $emit with an optional payload and $on

Answer №1

Similar questions

What are the steps for generating and implementing shared feature files in Cucumber?

Dynamically setting the default selection in a dropdown menu

Looking to extract data from an HTML form?

I'm having trouble understanding why I can't redirect to my GET router after making a POST request

Learn the process of adding a key and value into an array using Angular

Using Node.js: Interacting with npm inside a module

What is the process for sending a single post to two separate actions?

Shorten a data point in JSON code

Can anyone assist me with this HTML/jQuery code?

Angular Datatables unable to locate DataTables with Webpack Encore configuration

On iOS devices, background images may not appear in the Home Screen after being added

Solidjs: Implementing a Map in createStore does not trigger updates upon changes

Struggling to get .parent().toggleClass to function properly

Executing a function with arguments within a separate function

Visualizing JSON data on D3.js graph axis

`How to Customize the Branding in a Laravel Jetstream Project`

Extracting information from a Postgres query in Node.js

Learn the secret to displaying and concealing images with jquery!

Struggling to design a responsive layout as the div on the right keeps overlapping the div on the left

Display/Conceal Dropdown Menu for Combobox Using only Javascript