@feinzer/v-dropdown

Simple and reusable select/dropdown component using VueJS Slots.

Installation

npm install @feinzer/v-dropdown

or

yarn add @feinzer/v-dropdown

Usage

import { Dropdown } from '@feinzer/v-dropdown';

export default {
  ...
  components: {
    Dropdown,
  },
  ...
  data() {
    return {
      selected: Object,
      options: [
        ...
      ]
    };
  },
  ...
};

<Dropdown
  v-slot="{ select }"
  v-model="selected"
>
  <div
    v-for="option in options"
    :key="option.key"
    @click="select(option)"
  >
    Option content
  </div>
</Dropdown>

Props

Dropdown

| Property | Type | Default | Description | |:----------------------------|:--------|:--------|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | placeholder | String | empty | Text to show when no option is selected | label | String | empty | Key name of the selected object to show when an option is selected | canSearch | Boolean | false | Enables or disables the ability to search through the options. | @search | Event | | Triggered whenever you input something in the search text input. Used to filter results.