66 lines
1.7 KiB
Vue
66 lines
1.7 KiB
Vue
<template>
|
|
<ul class="cate-list list-unstyled d-flex flex-wrap mb-0">
|
|
<li v-if="showAll" class="mt-2 me-2">
|
|
<button
|
|
type="button"
|
|
class="btn"
|
|
:class="{
|
|
'btn-outline-primary': selectedCategory !== 'all',
|
|
'btn-primary': selectedCategory === 'all'
|
|
}"
|
|
@click="selectCategory('all')"
|
|
>
|
|
All
|
|
</button>
|
|
</li>
|
|
<li v-for="category in lists" :key="category.value" class="mt-2 me-2">
|
|
<button
|
|
type="button"
|
|
class="btn"
|
|
:class="{
|
|
'btn-outline-primary': category.value.toString() !== selectedCategory?.toString(),
|
|
'btn-primary': category.value.toString() === selectedCategory?.toString()
|
|
}"
|
|
@click="selectCategory(category.value)"
|
|
>
|
|
{{ category.label }}
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { defineProps, defineEmits, ref, watch } from 'vue';
|
|
|
|
const props = defineProps({
|
|
lists: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
showAll: {
|
|
type: Boolean,
|
|
required: false,
|
|
},
|
|
selectedCategory: {
|
|
type: String,
|
|
default: null,
|
|
required: false,
|
|
},
|
|
});
|
|
|
|
// 카테고리 선택
|
|
const selectedCategory = ref(props.selectedCategory);
|
|
|
|
const emit = defineEmits(['update:data']);
|
|
const selectCategory = (cate) => {
|
|
selectedCategory.value = selectedCategory.value === cate ? null : cate;
|
|
emit('update:data', selectedCategory.value);
|
|
};
|
|
|
|
watch(() => props.selectedCategory, (newVal) => {
|
|
selectedCategory.value = newVal;
|
|
});
|
|
|
|
|
|
</script>
|