Within my parent component, I retrieve an array of strings from an API and pass it down to the child component. The child component then displays this data as a dropdown list. When an item is selected from the dropdown, I aim to assign it to a specific variable. I attempted to use $emit and $event following documentation guidelines, but unfortunately, it is not functioning as expected. Could someone take a look at my code and point out where I might be mistaken?
The Parent Component in 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>
The Child Component - NlpVisionCatalog.vue
<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>
Any insights on where I might be making a mistake would be greatly appreciated. ps- http://localhost:5000/clients is the api that is running on my system.