From 410658f321f3aa01d947ba8b53d5963eff9a2f52 Mon Sep 17 00:00:00 2001
From: Hironsan <light.tree.1.13@gmail.com>
Date: Wed, 15 Jul 2020 11:38:49 +0900
Subject: [PATCH] Fix an issue where a query state and a filter state are not
 synchronized

---
 .../containers/annotation/FilterButton.vue    | 21 +++++++++++++++----
 frontend/layouts/annotation.vue               |  1 +
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/frontend/components/containers/annotation/FilterButton.vue b/frontend/components/containers/annotation/FilterButton.vue
index 8e7b81f0..00e69ee1 100644
--- a/frontend/components/containers/annotation/FilterButton.vue
+++ b/frontend/components/containers/annotation/FilterButton.vue
@@ -41,9 +41,16 @@
 
 <script>
 export default {
+  props: {
+    value: {
+      type: String,
+      default: '',
+      required: true
+    }
+  },
+
   data() {
     return {
-      selected: 0,
       items: [
         { title: 'All', param: '' },
         { title: 'Done', param: 'false' },
@@ -52,9 +59,15 @@ export default {
     }
   },
 
-  watch: {
-    selected() {
-      this.$emit('input', this.items[this.selected].param)
+  computed: {
+    selected: {
+      get() {
+        const index = this.items.findIndex(item => item.param === this.value)
+        return index === -1 ? 0 : index
+      },
+      set(value) {
+        this.$emit('input', this.items[value].param)
+      }
     }
   }
 }
diff --git a/frontend/layouts/annotation.vue b/frontend/layouts/annotation.vue
index f4240300..cb626e70 100644
--- a/frontend/layouts/annotation.vue
+++ b/frontend/layouts/annotation.vue
@@ -126,6 +126,7 @@ export default {
         this.$router.push({
           query: {
             isChecked: newValue,
+            page: 1,
             q: this.$route.query.q
           }
         })