Javascript 无法从Vuejs中的子组件向父组件发出事件

我的父组件从api获取数据，该数据是字符串数组，然后将其传递给子组件。在子组件中，我将来自父组件的数据显示为下拉列表，当我从下拉列表中选择特定项时，我希望它设置特定变量。 我使用了文档中显示的$emit和$event，但它不起作用。请查看我的代码并告诉我哪里出了问题

父组件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>

从“./components/NlpVisionCatalog”导入NlpVisionCatalog
从“axios”导入axios
导出默认值{
名称：“应用程序”，
组成部分：{
NlpVisionCatalog
},
数据（）{
返回{
目录：[]，
已选择目录“”“
}
},
方法：{
获取目录（）{
axios.get（“http://localhost:5000/clients")
.then（（resp）=>{this.catalogs.push.apply（this.catalogs，
响应数据、响应、结果、客户名称）；
}).catch（（错误）=>{
控制台日志（err）；
})
},
setcatalogselected（目录）{
this.catalog_selected=目录；
)}
},
创建（）{
this.fetchcatalogs（）
}
}

我的子组件是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>

在此处输入代码
选择目录
{{item}
导出默认值{
名称：“NlpVisionCatalog”，
道具：['cataloglist']，
数据（）{
返回{
公司：“
}
},
方法：{
emitbackthecatalog（目录名称）{
此.$emit（'listenClick'，目录名称）；
}
}
};

我到底错在哪里？

---

ps-是在我的系统上运行的api。

问题在于您的子组件select元素

将代码更改为类似于select元素中的use onChange函数

 <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);
    }
  }

选择目录
{{item}}
数据（）{
返回{
选定：“”
}
},
方法：{
emitbackthecatalog（目录名称）{
此.$emit（'listenclick'，目录名称）；
}
}

在父组件中

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

---

查看演示

非常感谢！！你能解释一下为什么我的方法失败了，而你的方法确实奏效了吗。我是Vuejs新手。select元素需要绑定一个值才能进行绑定。我们必须使用v-model。那么只有我们才能得到所选的值。并且还可以选择element triggers onchange函数，当每次更改option元素时，它都会发出一个listenclick to parent component最后一个问题。您已经使用了v-bind:value=“item”和v-bind:key=“item”。你到底为什么用这个？当我们使用v-for-directivev-bind时，是否每次都要使用它？v-bind:value不是在所有情况下都需要的，如果您在v-for中使用对象数组，那么它是必要的。v-bind：键是必需的。即使数组值更改或删除，它也会正确呈现dom。你可以查一下