57 lines
1.3 KiB
Vue
57 lines
1.3 KiB
Vue
<template>
|
|
<ul class="cate-list list-unstyled d-flex flex-wrap mb-0">
|
|
<li
|
|
v-for="category in lists"
|
|
:key="category.CMNCODVAL"
|
|
class="mt-2 mx-1"
|
|
>
|
|
<button
|
|
type="button"
|
|
class="btn"
|
|
:class="{
|
|
'btn-outline-primary': category.CMNCODVAL !== selectedCategory,
|
|
'btn-primary': category.CMNCODVAL === selectedCategory
|
|
}"
|
|
@click="selectCategory(category.CMNCODVAL)"
|
|
>{{ category.CMNCODNAM }}</button>
|
|
</li>
|
|
</ul>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { defineProps, ref } from 'vue';
|
|
|
|
// lists prop 정의
|
|
const props = defineProps({
|
|
lists: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
});
|
|
|
|
// 카테고리 선택
|
|
const selectedCategory = ref(null);
|
|
const emit = defineEmits();
|
|
const selectCategory = (cate) => {
|
|
selectedCategory.value = selectedCategory.value === cate ? null : cate;
|
|
emit('update:data', selectedCategory.value);
|
|
};
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
.cate-list {
|
|
margin-left: -0.25rem;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.cate-list {
|
|
overflow-x: scroll;
|
|
flex-wrap: nowrap !important;
|
|
|
|
li {
|
|
flex: 0 0 auto;
|
|
}
|
|
}
|
|
}
|
|
</style> |