Vue 3 select option package, where you should pass an array or array of objects as a prop and returns a selectd item or object.
npm install vue3-select-option-search
Feature
Using this package, you can display an array of object on select option list, select a specific object and render its display name.
Props ----- _v-model_, _data_ and _displayName_ are REQUIRED
placeHolder - Default title is Select Item, Pass a string you prefer to display initially, such as 'Select company', 'Select user', etc, than after you select an item, selected item's display name will be displayed.
width - By default width is inherited but if you wat to give a specific, just pass a number you like. Note - measurement will be in PX - pixels.
maxHeight - By default maximum height will be 250px, but if you wat to give a specific, just pass a number you like. Note - measurement will be in PX - pixels.
inputOutlineColor - By default the input outline colour when focused will be the shades of green, but if you want it to look different just pass _color name_, _hex code_ or _rgba value_ of your choice on string like inputOutlineColor="'_red_'".
inputBorderColor - By default the input border colour will be gray, but if you want it to look different just pass _color name_, _hex code_ or _rgba value_ of your choice on string like inputBorderColor="'_yellow_'".
selected - If you want to pass a default value to render initially, you can pass an object to _selected_ prop like
data - To render your items on a list, just pass array of objects, Note: only pass array of objects.
v-model - Pass a variable to store a selected object. For example, if you may want to store
selected object or item on a variable like this const selectedItem = ref({}) or const selectedItem = reactive({}), just pass selectedItem to v-model like v-model="selectedItem"
displayName - Pass a prop as string to displayName for example displayName="'name'", in this case name should be a field inside a object you passed on data array, like as
data = [{id: 1, name: abc, age: 50}, {id: 2, name: def, age: 25}], So now on this object, except for _id_, _name_ and _age_, if you mis-spell or pass a string which is not a key(field) of an object on array, the package will not render anything on option list.
- ## You should globally import this package and it's style on main.js, also you should use it on App, like
``vue
import SelectOption from 'vue3-select-option-search'
import "vue3-select-option-search/dist/style.css"
createApp(App).use(SelectOption).mount('#app')
`
- ## Alternatively
`vue
import SelectOption from 'vue3-select-option-search'
import "vue3-select-option-search/dist/style.css"
const app = createApp(App);
app.use(SelectOption);
app.mount('#app')
`
`vue
:width="500"
v-model="selectedItem"
:maxHeight="400"
:inputOutlineColor="'#86efac'"
:data="data"
:inputBorderColor="'gray'"
:displayName="'name'"
:selected="data[0]"
/>
{{ selectedItem.name }}
``