vue-multi-dropdown

A custom dropdown component for Vue.js

Example

Here is a demo using the default styling below:

Installation

npm install vue-multi-dropdown

These component is tied to the Vue window object, so all you need to do is require it where there is access to the window.Vue object.

require('vue-multi-dropdown');

Using the dropdown

<dropdown name="country_dropdown[]" label="Select A Country" v-bind:options="countryDropdown" v-on:change="updateResults" url="/countries.json" v-on:more="loadMoreDropdown"></dropdown>

Here is the breakdown of properties

• name: the name for the inputs
• label: the label for the dropdown
• options: the array/object of options
• change: the event that emits the results
• url: the URL for the load more event/function
• more: the text for the "more" button

Styling

There is CSS and SCSS in the root of the project. Use that for tweaking the dropdown styles.

Events

• change: used for getting the results of the currently checked options
• dropdown-toggle: emitted with the args: ['Dropdown Name', isOpenBoolean]
• more: used when the "show more" button is clicked

Event Examples

// ... data and stuff up here
methods: {
  updateResults: function(results) {
    // this just sends the result array along
    // as if countryResults was the dropdown's model
    this.countryResults = results;
  },
  loadMoreDropdown: function(data) {
    // the URL from the dropdown that was clicked with be here
    // this allows a generic function for populating options
    // if that is something you want
    fetch(data[1])
      .then(function(response) {
        return response.json();
      })
      .then(function(res) {
        this.countryDropdown = res;
        // you could also use something like:
        // this.dropdowns[data[0]] = res;
        // data[0] will be a string of the dropdown name
      }.bind(this))
      .catch(function(err) {
        console.error(err);
      });
  }
}