fix(default-theme): sync up data in some filter component (#2009)

Author: quando1910

packages/default-theme/src/components/listing/types/range.vue

@@ -22,12 +22,10 @@
   </div>
 </template>
 <script>
-import { computed, ref } from "@vue/composition-api"
-
+import { watch, ref } from "@vue/composition-api"
 import { SfFilter, SfHeading } from "@storefront-ui/vue"
 import SwInput from "@/components/atoms/SwInput.vue"
 import useVuelidate from "@vuelidate/core"
-import { required, email } from "@vuelidate/validators"
 
 export default {
   components: {
@@ -72,6 +70,19 @@ export default {
         value: max.value,
       })
     }
+
+    watch(() => props.currentFilters[minFilterCode], (v) => {
+      if (min.value !== v) {
+        min.value = v;
+      }
+    });
+
+    watch(() => props.currentFilters[maxFilterCode], (v) => {
+      if (max.value !== v) {
+        max.value = v;
+      }
+    });
+
     return {
       min,
       max,

packages/default-theme/src/components/listing/types/shipping-free.vue

@@ -14,8 +14,6 @@
   </div>
 </template>
 <script>
-import { computed, ref } from "@vue/composition-api"
-
 import { SfFilter, SfHeading } from "@storefront-ui/vue"
 import SwInput from "@/components/atoms/SwInput.vue"
 import SwCheckbox from "@/components/atoms/SwCheckbox.vue"
@@ -30,7 +28,7 @@ export default {
   },
   data() {
     return {
-      selected: this.currentFilters[this.filter.code] === "true",
+      selected: this.currentFilters[this.filter.code] === true,
     }
   },
   props: {
@@ -43,6 +41,11 @@ export default {
       default: () => ({}),
     },
   },
+  watch: {
+    currentFilters(val) {
+      this.selected = val[this.filter.code] === true;
+    },
+  },
 }
 </script>
 <style lang="scss" scoped>