CODEWITHSUNDEEP
javascriptvue.jsvuejs2
Robert Smith
Robert Smith

Reputation: 13

raising an event from a child component to a container component in Vue.js?

I have a child Vue component (SearchBox.Vue) that is a simple text box that will fire filterByEvent when the user hits the Enter key. In the container components, I should get the string in the text box and execute a function filterList to filter the customer's list based on the name entered. My question is how to pass the text entered in the text box to the parent component?

SearchBox.vue

<template>
  <div class="SearchBox">
        <input type="text" id="SearchBox" placeholder="Search" 
        v-on:keyup.13="$emit('FilterByEvent', $event.target.value)" :value="value" >
    <font-awesome-icon icon="search" />
  </div>
</template>

<script>
  export default {
    name: 'SearchBox',
    data() {
      return {
        value: ''
      }
    }
  }
</script>

<style scoped>

  .SearchBox {
    display: flex;
  }

</style>

the container code 

 <template>
  <div>
       <div>
        <SearchBox @FilterByEvent="filterList(value)"></SearchBox>
      </div>
   </div>
</template>

<script lang="ts">
  import { Component, Prop, Vue } from 'vue-property-decorator'
   import SearchBox from '@/components/templates/SearchBox.vue'
  @Component({
    components: {
      SearchBox
    }
  })

  export default class ContactList extends Vue {

    data() {
      return {

        filterString: ''

      }
    }

    filterList(filterStr :string) {
          this.$data.filterString = filterStr;
    }

  }
</script>

Upvotes: 0

Views: 218

Answers (2)

Baboo
Baboo

Reputation: 4258

The event is not working because the component is listening on a camel case event. Here is the explanation on why this doesn't work. Plus the @FilterByEvent expects a function to execute. So use instead

<SearchBox @filter-by-event="filterList"></SearchBox>

and emit the event this way:

<div class="SearchBox">
    <input type="text" id="SearchBox" placeholder="Search" 
    v-on:keyup.13="$emit('filter-by-event', $event.target.value)" :value="value" >

Upvotes: 2

Robert Smith
Robert Smith

Reputation: 13

I have found that passing the $event itself will pass the text box value 

 <SearchBox @FilterByEvent="filterList($event)"></SearchBox>

Upvotes: -1

Related Questions