69 lines
1.6 KiB
Vue
69 lines
1.6 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="item" :value="i" :selected="value == i">{{ 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: true,
|
|
},
|
|
isRow : {
|
|
type: Boolean,
|
|
default: true,
|
|
required: true,
|
|
}
|
|
});
|
|
|
|
const emit = defineEmits(['update:data']);
|
|
const selectData = ref(props.value);
|
|
|
|
watchEffect(() => {
|
|
emit('update:data', selectData.value);
|
|
})
|
|
</script>
|