Is it possible to retrieve calculated data from a child component and pass it to the parent component?

Is there a way to transfer computed data from a child component to a parent component? Currently, I am passing data from the parent to the child first and then I would like to utilize the computed property (data) in the parent component. This is crucial as I intend to reuse this significant child component in other components.

In my setup, I have implemented a search input field for filtering items. Ideally, when a user types in the search query, I want to retrieve the filtered list from the child component.

Parent component

<input class="form-control form-control-search m-input" autocomplete="off" type="text" v-on:input='testFunc()' v-model="search" placeholder="Search...">
<paginate-links v-if="items.length > 0" :models="items">
  <div class="m-list-timeline__item no-timeline" v-for="item in filterItems" v-bind:key="item.id">
    {{ item.title }}
  </div>
</paginate-links>

Child component

props: ['item']
computed: {
    filterItems () {
      return filter // code implementation here
    }
}

Therefore, is it possible to access the filterItems in the parent component?

Answer №1

If you're looking to send data back to the parent, one simple way to do it is by using an emit within the computed properties.

Within the child component:

computed:{
  myValue() {
    let temporary = this.number + 1;
    this.$emit('onNumberChange', temporary);
    return temporary;
  }
}

In the parent template:

<my-child-component @onNumberChange="handleNumberChange"/>

In the parent script:

methods: {
  handleNumberChange(updatedValue) {
    console.log('The new value is: ', updatedValue);
  }
}

You could achieve a similar outcome with watch or by passing a function as a prop from the parent component, but utilizing Vuex would be my preferred approach.

Check out Vuex for more information

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I place an Object in front of an Array in JavaScript?

Currently, I am working on an Angular project where I need to modify a JSON array in order to display it as a tree structure. To achieve this, the objects in the array must be nested within another object. Desired format / output: this.nodes = [ { id ...

Switching perspective in express with Pug

Hello everyone, I'm still getting the hang of using Node.js with Express and Jade. I've successfully set up a basic 1 page app where a login page is displayed by default. Once the user logs in and is authenticated against a database, the function ...

NextJS 13 causes tailwind to malfunction when route group is utilized

I've encountered an issue in my NextJS 13 application where Tailwind classes are no longer being applied after moving page.tsx/layout.tsx from the root directory to a (main) directory within the root. I suspect that there may be a configuration that i ...

What are the best practices for updating models using Bookshelf.js?

I'm struggling to make sense of the Bookshelf API, particularly when it comes to performing upsert operations. Let me outline my specific scenario: My model is named Radio, with a custom primary key called serial. For this example, let's assume ...

What is the best way to display text from one text field onto another text field?

Here's a challenging question that I've been pondering... Issue: I am using a virtual keyboard that needs to interact with different text fields on various pages. Every time I click on a text field, the keyboard should appear, and every key I pr ...

What is the method to execute a prototype function within another prototype?

I am facing an issue with my JavaScript class and need some help to resolve it. MyClass.prototype.foo = function() { return 0; } MyClass.prototype.bar = function() { return foo() + 1; } Unfortunately, when I try to run the program, it throws an ...

React does not allow for images to be used as background elements

I am currently working on a web page and I have attempted to use both jpg and png images as backgrounds, but they do not seem to display on the page. import './Entrada.css' const Entrada = () => { return( <div style={{ b ...

When I refresh the page in Angular2, the router parameters do not get loaded again

When loading my application on routers without parameters, everything is normal. However, when trying to use a router with params, the application fails to load. For example: localhost:3000/usersid/:id The code for the router is as follows: const appRou ...

The error message "email() is not a valid function when using the onclick attribute

Can anyone lend a hand? I feel like I must be overlooking something really obvious. I'm having trouble calling my function to execute my ajax call. Any assistance would be greatly appreciated. Thank you! Here is an excerpt of the HTML code: $(docu ...

"npm is the go-to tool for managing client-side JavaScript code

As I delved into a document outlining the npm Developer Guide, a question sprang to mind. Is it within the realm of possibility to construct a web client application using javascript/css/html with npm at the helm? And if so, might there be examples avail ...

What is the best approach for managing recurring events and the associated event details in a efficient manner? (Mongo, Vue)

I'm facing challenges in designing a schema for my data. I've come across numerous threads discussing recurring calendar events, but I'm struggling to apply them to my unique situation. The nuances in my case make it quite challenging. Esse ...

Transferring information to the server with JSON in the Codeigniter framework

I have a JavaScript array (unitdata_set) that I need to send to the server for database processing using Codeigniter. JavaScript Array (unitdata_set):- [{"unit_id":"13","unit_title":"Testsdsdf","unit_max_occupancy":"3","unit_no":"1","unit_no_adults":"1", ...

The functions firebase.auth().currentUser and onAuthStateChanged consistently return null even when the user is logged in

Despite the fact that my front end Swift application indicates that the user is signed in, I am encountering an issue where firebase.auth().currentUser and the onAuthStateChanged listener in my node.js code return null. The backend service is called from t ...

Utilizing the smallslider feature through jQuery/JavaScript operations

I've recently embarked on the journey of learning JavaScript/jQuery. I've been attempting to incorporate this cool effect, but unfortunately, I'm facing some difficulties with it: My goal is to understand how to execute this effect using Ja ...

How can I conceal the element that came before in JavaScript?

<div onclick="toggleContent(this)" class="iptv"><div class="triangle"></div><b>LUZ HD</b> - 98 channels (including 32 HD channels) <div class="iptv_price"><b><img src="img/rj45.png" class="icon_ofert ...

Tips for adding responses to input fields in AngularJS

I am looking to populate data into 3 inputs based on the JSON response I receive from my node server. However, despite receiving a response, I am unable to input it into the designated fields. Controller: $scope.edit = function(id, contact) { console.log ...

Leveraging Express request-specific variables to facilitate logging with correlation IDs

Our node express app is now incorporating correlation id's to link requests together. These id's are sent in the header from other services, and our middleware captures them, creates a bunyan logger with the id, and includes it in the request obj ...

Distributing your React component on npm

I've been working on a React component for over a week now and I'm struggling to publish it on NPM. The lack of credible resources online has made this process challenging for me. Can anyone offer step-by-step guidance or recommend reliable reso ...

Transform the Nodejs server into a reusable Node module

Can a nodejs API server be transformed into a node module for use in other projects with minimal code modifications? Additional Information: The node js server contains various APIs (get, post, put). If I integrate this server as a node module within anot ...

What is the proper way to confirm the authenticity of a captcha code

hey there, I'm struggling with my captcha code. The issue is that it still accepts wrong captchas when entered in the input box. Can someone guide me on how to validate the wrong captcha entry? Here's my form code: <p class="Captcha" style=" ...