42 lines
1.1 KiB
Vue
42 lines
1.1 KiB
Vue
<template>
|
|
<div class="space-y-2">
|
|
<label for="select" class="block text-sm text-gray-900">{{ label }} <span>{{ required ? '*' : '' }}</span></label>
|
|
<select
|
|
id="select"
|
|
v-model="selectedOption"
|
|
name="select"
|
|
class="block outline-1 -outline-offset-1 outline-gray-300 w-full rounded-md border-0 bg-white p-2 text-base text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-600"
|
|
@change="updateSelection">
|
|
<option disabled value="">Seleccione una opción</option>
|
|
<option v-for="option in options" :key="option.value" :value="option.value">{{ option.label }}</option>
|
|
</select>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
label: {
|
|
type: String,
|
|
default: 'Select Menu'
|
|
},
|
|
required: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
options: { type: Array, default: () => [] }
|
|
},
|
|
emits: ['input-value'],
|
|
data() {
|
|
return {
|
|
selectedOption: null
|
|
}
|
|
},
|
|
methods: {
|
|
updateSelection(event) {
|
|
this.selectedOption = event.target.value
|
|
this.$emit('input-value', this.selectedOption)
|
|
}
|
|
}
|
|
}
|
|
</script> |