0
votes

Here is sample of Dropdown which works correctly.

<Dropdown>
  <div
    type="button"
    aria-haspopup="true"
    aria-expanded="false"
  >
  Show Dropdown
  </div>
  <template #popover>
    <button
      @click="submit"
    >
    Click me
    </button>
  </template>
</Dropdown>
<script>
method:{
  submit() {
    // How make Dropdown close
  }
}
</script>

I need to close dropdown after button clicked.

1

1 Answers

0
votes
  • Define showDropdown in data
  • Use v-show="showDropdown" on what you want to hide
  • Define @click="showDropdown = !showDropdown" on the dropdown header to toggle the dropdown
  • Set showDropdown = false on submit

See a working example here

<template>
  <Dropdown>
    <div
      type="button"
      aria-haspopup="true"
      aria-expanded="false"
      @click="showDropdown = !showDropdown"
    >
      Show Dropdown
    </div>
    <div v-show="showDropdown">
      <button
        @click="submit"
      >
        Click me
      </button>
    </div>
  </Dropdown>
</template>

<script>
import { defineComponent } from "vue";
export default defineComponent({
  data(){
    return {
      showDropdown: false
    }
  },
  methods: {
    submit() {
      this.showDropdown = false;
      // do more
    }
  }
  
});
</script>

If you need it to be a template, you can use v-if instead of v-show