82 lines
2.0 KiB
Vue
82 lines
2.0 KiB
Vue
<template>
|
|
<div class="mb-2" :class="isRow ? 'row' : ''">
|
|
<label :for="name" class="col-md-2 col-form-label" :class="isLabel ? 'd-block' : 'd-none'">
|
|
{{ title }}
|
|
<span :class="isEssential ? 'link-danger' : 'none'">*</span>
|
|
</label>
|
|
<div :class="isRow ? 'col-md-10' : 'col-md-12'">
|
|
<select class="form-select" :id="name" v-model="selectData">
|
|
<option v-for="(item, i) in data" :key="i" :value="isCommon ? item.value : i">
|
|
{{ isCommon ? item.label : item }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
<div v-if="isAlert" class="invalid-feedback">{{ title }}을 확인해주세요.</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, watch, watchEffect } from 'vue';
|
|
|
|
const props = defineProps({
|
|
title: {
|
|
type: String,
|
|
default: '라벨',
|
|
required: true,
|
|
},
|
|
name: {
|
|
type: String,
|
|
default: 'nameplz',
|
|
required: true,
|
|
},
|
|
isEssential: {
|
|
type: Boolean,
|
|
default: false,
|
|
required: false,
|
|
},
|
|
data: {
|
|
type: Array,
|
|
default: [],
|
|
required: true,
|
|
},
|
|
value: {
|
|
type: String,
|
|
default: '0',
|
|
require: false,
|
|
},
|
|
isAlert : {
|
|
type: Boolean,
|
|
default: false,
|
|
required: false,
|
|
},
|
|
isLabel : {
|
|
type: Boolean,
|
|
default: true,
|
|
required: false,
|
|
},
|
|
isRow : {
|
|
type: Boolean,
|
|
default: true,
|
|
required: false,
|
|
},
|
|
isCommon : {
|
|
type: Boolean,
|
|
default: false,
|
|
required: false,
|
|
}
|
|
});
|
|
|
|
const emit = defineEmits(['update:data']);
|
|
const selectData = ref(props.value);
|
|
|
|
|
|
watchEffect(() => {
|
|
if (props.isCommon && props.data.length > 0) {
|
|
selectData.value = props.data[0].value; // 첫 번째 옵션의 값으로 설정
|
|
} else {
|
|
selectData.value = props.value; // 기본값으로 설정
|
|
}
|
|
emit('update:data', selectData.value);
|
|
})
|
|
</script>
|