CODEWITHSUNDEEP
javascripthtmlvue.jsvue-component
dokichan
dokichan

Reputation: 611

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:

<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. 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.

How can I pass this clicked element in $emit?

Upvotes: 0

Views: 85

Answers (1)

dokichan
dokichan

Reputation: 611

Method pick in component was defined right:

pick(item) {
   this.$emit('pick', item)
}

All you need to do is in parent component use $event as param in your 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)"
/>

Upvotes: 1

Related Questions