Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | <template>
<div class="select-field">
<label :for="id" class="select-label">{{ label ?? '' }}</label>
<select :id="id" :aria-describedby="describedby" v-model.number="selectValue" class="select-element">
<option v-for="option in options" :key="option.id" :value="option.id" class="select-option">
{{ option.displayName }}
</option>
</select>
<p v-if="description" :id="describedby" class="select-description">{{ description }}</p>
</div>
</template>
<script setup lang="ts">
import { computed } from 'vue';
const props = defineProps<{
id: string;
label: string;
description?: string;
describedby?: string;
options: { id: number | string; displayName: string }[];
modelValue: number;
}>();
const emit = defineEmits(['update:modelValue']);
const selectValue = computed({
get: () => props.modelValue,
set: (value: number) => emit('update:modelValue', value),
});
</script>
<style scoped src="././SelectField.scss" />
|