Vue State Dropdown

State dropdown for Vue@2.

Demo

Installation

• yarn:

    yarn add vue-state-dropdown

• npm:

    npm i --save vue-state-dropdown

Usage

• Install as a global component:

  import Vue from "vue";
  import VueStateDropdown from "vue-state-dropdown";
  
  Vue.use(VueStateDropdown);

• Or use in a specific component

  import VueStateDropdown from 'vue-state-dropdown'
  
  export default {
    components: {
      VueStateDropdown
    }
  }

• In your component:

  <template>
  ...
    <vue-state-dropdown
      @onSelect="onSelect"
      :countryCode="'tr'"
      :selectFirstItem="true"
      :preferredStates="['06', '34']"
      :immediateCallSelectEvent="true"
      :disabled="false"
      :clearable="false"
      :multiple="false"
      :searchable="true"
      :closeOnSelect="true"
    />
  ...
  <template>
  <script>
  export default {
    methods: {
       onSelect(state) {
         console.log(state);
         // Check the state object example below.
       },
    },
  }
  </script>

State Object Example

{
  "id": 2217,
  "name": "Ankara",
  "country_id": 225,
  "country_code": "TR",
  "country_name": "Turkey",
  "state_code": "06",
  "type": "province",
  "latitude": "39.78052450",
  "longitude": "32.71813750"
}

Props

| Property value | Type | Default value | Description | | -------------------------- | --------- | ---------------| ---------------------------------------------------------------------------------- | | disabled | Boolean | false | Disables the dropdown | | countryCode | string | '' | Get states by country code. ie 'tr' | | countryName | string | '' | Get states by country name. ie 'turkey' | | countryId | Number | null | Get states by country id. ie 225 | | defaultState | Number | '' | Set a state as selected at startup with state id. ie 2217 | | defaultStateByName | string | '' | Set a state as selected at startup with state name. ie 'Ankara' | | selectFirstItem | Boolean | false | Set first state in the list as selected | | clearable | Boolean | false | User can clear or not the selected country | | multiple | Boolean | false | Select multiple country | | searchable | Boolean | true | Set states searchable | | closeOnSelect | Boolean | true | Close country list on select | | placeholder | String | '' | Set a placeholder for the input | | preferredState | Array | [] | Preferred states list, will be on top of the dropdown. ie ['06', 'WTO'] | | onlyStates | Array | [] | List of states will be shown on the dropdown. ie ['06', 'WTO'] | | ignoredStates | Array | [] | List of states will NOT be shown on the dropdown. ie ['06', 'WTO'] | | immediateCallSelectEvent | Boolean | false | Call the onSelect event when the component is mounted. | | showNotSelectedOption | Boolean | false | The Not Selected option is added to the top of the list. (All values are empty.) | | notSelectedOptionText | String | Not Selected | Replace Not Selected text with another string. |

Events

| Property value | Arguments | Description | | ------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------- | | onSelect | Object | Fires when the input changes with the argument is the object includes state object. (Check the state object example above) | | open | none | Triggered when the dropdown is open. | | close | none | Triggered when the dropdown is closed. | | option_selecting | Object | Triggered after an option has been selected, before updating internal state. (Return same object with onSelect). | | option_selected | Object | Triggered when an option has been selected, after updating internal state. (Return same object with onSelect). | | option_deselecting| Object | Triggered when an option has been deselected, before updating internal state. (Return same object with onSelect). | | option_deselected | Object | Triggered when an option has been deselected, after updating internal state. (Return same object with onSelect). |

Highlights & Credits

• Data source: dr5hn/countries-states-cities-database
• Vue select: sagalbot/vue-select
• Vue app created by vue-cli.