fix

src/views/digitalItem/merchant-info.vue

@@ -1,46 +1,20 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
+import { ref, onMounted, onUnmounted, computed, toRefs } from "vue";
+import { useI18n } from 'vue-i18n'
+import { useClothesCategories } from '@/utils/ClothesCategory'
 //const props = defineProps({
 //})
-//const emit = defineEmits([
-//])
-let data = reactive({
-})
-const categoriesList = ref([
-	{
-		label: 'Outwear',
-		value: 'Outwear'
-	},
-	{
-		label: 'Dress',
-		value: 'Dress'
-	},
-	{
-		label: 'Trousers',
-		value: 'Trousers'
-	},
-	{
-		label: 'Blouse',
-		value: 'Blouse'
-	},
-	{
-		label: 'Skirt',
-		value: 'Skirt'
-	},
-	{
-		label: 'Accessories',
-		value: 'Accessories'
-	},
-]);
-const genderList = ref([
-	{
-		label: 'Male',
-		value: 'Male'
-	},
-	{
-		label: 'Female',
-		value: 'Female'
-	},
+const emit = defineEmits([
+	'change'
+])
+
+const { t } = useI18n()
+
+const categoriesList = useClothesCategories();
+
+const genderList = computed(() => [
+  { label: t('Wardrobe.assets.genders.male'), value: 'male' },
+  { label: t('Wardrobe.assets.genders.female'), value: 'female' }
 ])
 const categories = ref([''])
 const gender = ref([''])
@@ -48,13 +22,16 @@ const gender = ref([''])
 const clearFilters = () => {
 	categories.value = ['']
 	gender.value = ['']
+	handleChange()
+}
+const handleChange = () => {	
+	emit('change', {categories:categories.value, gender:gender.value})
 }
 onMounted(()=>{
 })
 onUnmounted(()=>{
 })
 defineExpose({})
-const {} = toRefs(data);
 </script>
 <template>
 	<div class="filters">
@@ -65,12 +42,12 @@ const {} = toRefs(data);
 		<div class="categories">Categories</div>
 		<div class="line"></div>
 		<div class="multiple">
-			<checked :list="categoriesList" v-model:selected="categories" />
+			<checked :list="categoriesList" @change="handleChange" v-model:selected="categories" />
 		</div>
 		<div class="categories">Gender</div>
 		<div class="line"></div>
 		<div class="multiple">
-			<checked :list="genderList" v-model:selected="gender" />
+			<checked :list="genderList" @change="handleChange" v-model:selected="gender" />
 		</div>
 	</div>
 </template>