Enable action

Author: w3bdesign

components/Products/ProductsFilters.vue

@@ -9,8 +9,8 @@
             :key="type.id"
             :id="type.id"
             :label="type.name"
-            :checked="type.checked"
-            @change="() => toggleProductType(type.id)"
+            :modelValue="type.checked"
+            @change="(checked) => toggleProductType(type.id)"
           />
         </div>
       </div>
@@ -24,7 +24,6 @@
           :max="1000"
           :value="priceRange[1]"
           :startValue="priceRange[0]"
-          :disabled="false"
           @input="(value) => setPriceRange([priceRange[0], value])"
         />
       </div>

components/common/Checkbox.vue

@@ -1,6 +1,11 @@
 <template>
   <label class="flex items-center space-x-2 cursor-pointer">
-    <input type="checkbox" class="form-checkbox h-4 w-4 text-blue-600 rounded" disabled />
+    <input
+      type="checkbox"
+      class="form-checkbox h-4 w-4 text-blue-600 rounded"
+      :checked="modelValue"
+      @change="$emit('change', $event.target.checked)"
+    />
     <span class="text-sm">{{ label }}</span>
   </label>
 </template>
@@ -11,5 +16,10 @@ defineProps({
     type: String,
     default: '',
   },
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
 });
+defineEmits(['change']);
 </script>