CODEWITHSUNDEEP
vue.js
Wale Codes
Wale Codes

Reputation: 11

How to pass props from parent components to child components

I have three components namely Home.vue, Searchform.vue and Searchresults.vue respectively in my project.

Home.vue - is the view that i'm showing the other two components

Searchform.vue - is the component that hold the search input fields

Searchresults.vue - is the components that shows the result of search input in a "table form"

So when a user has make a search query and a result is render in the table. i make a method to get a row clicked into a data and pass an a props to Searchform.vue then bind the props on that on the home.vue. But the props data is not displaying on the Searchform.vue components resulting no showing on home.vue view.

Below is the code of two components and the home.vue

Home.vue

<template>
  <div class="home">
    <div class="example" v-if="isLoading === true">
      <a-spin size="large" />
    </div>
    <Navbar />
    <div class="container">
    <SearchForm 
      v-on:search="search"
      :selectedinterest="selectedinterest"
    />
    <SearchResults 
      v-if="interests.length > 0"
      v-bind:interests="interests"
      v-bind:reformattedSearchString="reformattedSearchString"
    />
    <ErrorMessage 
      v-if="interests.length < 0"
      v-bind:interests="interests"
     />
    <Footer />
  </div>
  </div>
</template>

Searchresults.vue

export default {
data() {
 return {
  selectedinterest: []
 }
}
addSelection(interest) {
    this.selectedinterest.push(interest.name))
 }
}

And lastly the Searchform.vue that i want to pass the props to and bind it on the home.vue to get the data

export default {
  name: 'SearchForm',
  props: [
    'selectedinterest'
  ]
}

Please how can i pass the props 'selectedinterest' to the home.vue and searchform.vue from the searchresults.vue components.

Upvotes: 1

Views: 53

Answers (2)

Eugen Govorun
Eugen Govorun

Reputation: 3316

Props in - events out

Searchresults.vue

export default {
data() {
 return {
  selectedinterest: []
 }
}
addSelection(interest) {
    this.selectedinterest.push(interest.name));
    this.$emit('onInterestSelected', this.selectedinterest);
 }
}

Home.vue

...
<SearchResults 
  v-if="interests.length > 0"
  v-bind:interests="interests"
  v-bind:reformattedSearchString="reformattedSearchString"
  v-on:onInterestSelected="updateSelectedInterest"
/>
<!-- don't forget create method updateSelectedInterest(updatedInterest) -->
...

Upvotes: 1

arm
arm

Reputation: 145

One way to go could be to emit an event in your Searchresults.vue component inside the addSelection method.

addSelection(interest) {
    this.selectedinterest.push(interest.name))
    this.$emit('addedSelection', this.selectedinterest);
}

In your parent component you will listen to your event and use a method to store the event data and then pass it on as props to other components.

<SearchResults 
      v-if="interests.length > 0"
      v-bind:interests="interests"
      v-bind:reformattedSearchString="reformattedSearchString"
      @addedSelection="addedSelectionTriggered"
/>

Using the addedSelectionTriggered method in your parent component you can store the emitted selectedinterest array and pass it on as props.

Upvotes: 0

Related Questions