Not able to emit an event to a parent component from child component in Vuejs

Question

My parent component takes data which is an array of strings from the api and then passes it to the child component. In the child component I display the data from the parent as a dropdown list and when I select a particular item from the dropdown list I want it to set a particular variable. I have used $emit and $event as shown in documentation but it is not working.Please look at my code and tell me where I am going wrong.

Parent Component App.vue

<template>
    <div id="app">
        <nlp-vision-catalog v-bind:cataloglist="catalogs"  v-on:listenClick="setcatalogselected($event)" ></nlp-vision-catalog>
    </div>
</template>

<script>
    import NlpVisionCatalog from './components/NlpVisionCatalog'
    import axios from 'axios'

    export default {
        name: 'App',
        components: {
            NlpVisionCatalog
        },
        data (){
            return {
            catalogs :[],
            catalog_selected : ""
        }
    },
    methods:{
        fetchcatalogs(){
                axios.get("http://localhost:5000/clients")
                .then((resp)=>{this.catalogs.push.apply(this.catalogs,
                   resp.data.response.results.client_name);
                }).catch((err)=>{
                    console.log(err);
                })
        },
        setcatalogselected(catalog){
        this.catalog_selected = catalog;
    )}
},
    created(){
        this.fetchcatalogs()
    }
}
</script>
<style></style>

My Child Component is NlpVisionCatalog.vue

enter code here
<template>
<div>
    <h3>Select Catalog</h3>
    <select>
        <option v-for="item in cataloglist">
            <p v-on:click="emitbackthecatalog(item)"> {{ item }} </p>
        </option>
    </select>
</div>
</template>

<script>
export default{
    name : 'NlpVisionCatalog',
    props: ['cataloglist'],
    data (){
        return {
            comp: ""
        }
    },
    methods:{
        emitbackthecatalog(catalog_name){
            this.$emit('listenClick',catalog_name);
        }
    }
};
</script>

<style>
</style>

Where exactly I am going wrong? ps- http://localhost:5000/clients is the api that is running on my system.

Answer 1

The problem is in your child component select element

change your code to like this use onChange function in select element

 <h3>Select Catalog</h3>
    <select v-model="selected" v-on:change="emitbackthecatalog(selected)">
        <option v-for="item in cataloglist" :value="item" :key="item" >
           {{ item }}
        </option>
    </select>



data (){
    return {
        selected: ""
    }
  },
  methods:{
    emitbackthecatalog(catalog_name){
        this.$emit('listenclick',catalog_name);
    }
  }

In your parent component

<nlp-vision-catalog v-bind:cataloglist="catalogs"  v-on:listenclick="setcatalogselected($event)" ></nlp-vision-catalog>

check the demo link