Tengo estos componentes, ese es el menú desplegable:

 <template> <div class="dropdown-menu" v-click-outside="close"> <p class="paragraph medium dropdown-default-value" @click="$emit('show')"> <span>{{ defaultValue }}</span> </p> <div v-if="showContent" class="dropdown-menu-content"> <div v-for="item in dropdownItems"> <p class="paragraph medium drop-item" @click="pick(item)">{{ item }}</p> </div> </div> </div> </template> <script> import vClickOutside from 'v-click-outside'; export default { name: "Dropdown", directives: { clickOutside: vClickOutside.directive }, props: { defaultValue: String, dropdownItems: Array, showContent: Boolean, onShow: Boolean }, methods: { close() { this.$emit('close') }, pick(item) { this.$emit('pick', item) } } } </script>

Este es un componente clild con accesorios, en el componente principal se ve así:

 <Dropdown :default-value="item.default" :show-content="item.show" :dropdown-items="item.items" @show="item.show = !item.show" @close="item.show = false" @pick="pick(item)" /> ... export default { name: "settings", data() { return { settingsOptions: [ { title: 'Language', text: 'Interface language', show: false, default: 'English', items: ['English', 'Russian', 'Polish'] }, { title: 'Theme', text: 'Chose dark or light theme', show: false, default: 'Dark', items: ['Dark', 'Light'] }, { title: 'Default currency', text: 'Chose default currency for pages, etc.', show: false, default: 'EUR', items: ['EUR', 'USD'] } ], showDropdown: false } }, methods: { pick(item) { console.log(item) } } }

El problema está en la función de pick , no tengo idea de cómo implementar esto. Este código que ves aquí solo imprime este elemento completo, y esto es todo lo que pude obtener. Lo que necesito es obtener el elemento en el que se ha hecho clic, usando $emit , por supuesto.

¿Cómo puedo pasar este elemento en el que se hizo clic en $emit ?