CODEWITHSUNDEEP
vue.jsvuexonchangetargeteventemitter
stieve
stieve

Reputation: 3

How to catch an emeit event.target with vue?

How to catch an emeit event.target with vue ? Trying to make an $emit vue and getting an error

I tryed to catch an event target emit from a child component from an input , passing as a param the onChange input string. But getting an error "Cannot read properties of undefined (reading 'target')". Even though the syntaxis is correct I assume.

https://stackblitz.com/edit/nuxt-bootstrap-vue-dynamic-img-iiam9a?file=components%2FBrand.vue,components%2FMoneyAmount.vue,pages%2Findex.vue,components%2FCategory.vue,components%2FRating.vue,components%2FSearch.vue,components%2FProductList.vue,store%2Findex.js,components%2FProduct.vue

<input
      type="text"
      placeholder="Search here"
      v-model="search"
      :change="$emit('search', $event.target.value)"

// Parent

  <Search @search="searchProduct" />

<script>
methods: {
    searchProduct(searchInput) {
      this.search = searchInput;
    },
  },
    />

Upvotes: 0

Views: 522

Answers (1)

U-Dev
U-Dev

Reputation: 1387

To listen for events in Vue, we use v-on:event-name="..." syntax. It can also be shortened to @event-name="...". You can find more details here.

You are mistakenly listening for :change instead of @change. So update code should be:

<input
  ...
  @change="$emit('search', $event.target.value)"
  |__ `@` instead of `:`
/>

Upvotes: 2

Related Questions