An easier way to display A Vue.js dropdown component, No special dependencies, no jquery, no tailwind.css, just VueJS and CSS magic.
$ npm install dropdown-vue-next
// OR
$ yarn add dropdown-vue-next
- Vue.js
^3.0.0
<Dropdown
:options="arrayOfObjects"
:selected="object"
@updateOption="onSelectedOption"
:placeholder="'Select your Option'"
:closeOnOutsideClick="boolean"
>
</Dropdown>
<script setup>
import Dropdown from 'dropdown-vue-next'
import {reactive, ref} from 'vue
const countries = ref([
{id:1, name:'Morocco'},
{id:2, name:'USA'},
{id:3,name: "Canada"}
])
let object = reactive({name: "Object Name"})
const onSelectedOption = (payload) => object = payload
</script>
Property | Type | Default value |
---|---|---|
closeOnOutsideClick | boolean | true |
placeholder | string | 'Select an option.' |