Vue simple selectbox

Vue simple selectbox allows you to easy work and change the wrapper on top of the default select element.

Install

Install the dependency with

yarn add vue-simple-selectbox

or for npm

npm install --save vue-simple-selectbox

In the Vue you can use it by simply importing it

import SelectBox from "vue-simple-selectbox";

export default {
  components: { SelectBox },
  data: function() {
    return {
      options: [
        {value:"blue", text:"It's Blue"},
        {value:"yellow", text:"Well no, it's Yellow"},
        {value:"green", text:"Nice and cool Green"}
      ]
    }
  }
}

And use it like any other component

<template>
  <div id="app">
    <SelectBox :placeholder="'Default placeholder...'" :options="options" :selected="'green'" :minWidth="190"></SelectBox>
  </div>
</template>

Props

| Option | Type | Required | Default | Info | | --- | --- | --- | --- | --- | | placeholder | string | false | 'Select item...' | Default placeholder | | selected | string | false | - | Value of the selected element if none is selected(if not set, then placeholder is displayed) | | minWidth | number | false | 160 | Min-width css property applied to the select container | | options | array | true | - | Array of objects {value: 'value', text: 'text'} to be shown in the select box |

Getting the value

Selectbox emits event selectOption. So one can call a method on change

<SelectBox :options="options" v-on:selectOption="changeOption"></SelectBox>