vue-simplest-select

The simplest Vue2 select component

Installation

npm i --save-dev vue-simplest-select

Browser

Include the script file, then install the component with Vue.use(vueSelect); e.g.:

<script
  type="text/javascript"
  src="node_modules/vuejs/dist/vue.min.js"
></script>
<script
  type="text/javascript"
  src="node_modules/vue-simplest-select/dist/vue-simplest-select.min.js"
></script>
<script type="text/javascript">
  Vue.use(vueSelect);
</script>

Module

import vueSelect from "vue-simplest-select";

Usage

Once installed, it can be used in a template as simply as:

<vueSelect
  id="demo-id"
  :width="200"
  name="demo-id"
  :options="options"
  v-model="selectedValue"
  @vueSelectChanged="onChange"
>
</vueSelect>

in your data add array with options:

data: () => ({
  selectedValue: null,
  options: [
    {
      label: "Option 1",
      value: "value 1"
    },
    {
      label: "Option 2",
      value: "value 2"
    },
    {
      label: "Option 3",
      value: "value 3"
    },
    {
      label: "Option 4",
      value: "value 4"
    },
    {
      label: "Option 5",
      value: "value 5"
    }
  ]
});