[英]How to get clicked element from dropdown child component?
I have this components, that is dropdown menu:我有这个组件,即下拉菜单:
<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>
This is clild component with props, in parent component it looks like this:这是带有 props 的子组件,在父组件中它看起来像这样:
<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)
}
}
}
The problem is in pick
function, I have no idea on how to implement this.问题出在
pick
function 上,我不知道如何实现它。 This code you see here just prints this whole item, and this is as far as I could get.你在这里看到的这段代码只是打印了整个项目,这是我所能得到的。 What I need, is to get element which has been clicked, using
$emit
of course.我需要的是获取被点击的元素,当然是使用
$emit
。
How can I pass this clicked element in $emit
?如何在
$emit
中传递这个被点击的元素?
Method pick
in component was defined right:组件中的方法
pick
定义正确:
pick(item) {
this.$emit('pick', item)
}
All you need to do is in parent component use $event
as param in your function:您需要做的就是在父组件中使用
$event
作为 function 中的参数:
<Dropdown
:default-value="item.default"
:show-content="item.show"
:dropdown-items="item.items"
@show="item.show = !item.show"
@close="item.show = false"
@pick="pick($event)"
/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.