From 460d7ff4ff5fe064da57137cb4313872bab7c1e9 Mon Sep 17 00:00:00 2001
From: Hironsan <light.tree.1.13@gmail.com>
Date: Sat, 18 Jul 2020 22:26:50 +0900
Subject: [PATCH] Fix 400 error on text classification

---
 .../annotation/MultiClassClassification.vue   | 34 ++++++++++++-------
 1 file changed, 21 insertions(+), 13 deletions(-)

diff --git a/frontend/components/organisms/annotation/MultiClassClassification.vue b/frontend/components/organisms/annotation/MultiClassClassification.vue
index 981affad..6470a1da 100644
--- a/frontend/components/organisms/annotation/MultiClassClassification.vue
+++ b/frontend/components/organisms/annotation/MultiClassClassification.vue
@@ -1,13 +1,12 @@
 <template>
   <v-combobox
-    :value="annotatedLabels"
+    v-model="annotatedLabels"
     :items="labels"
     item-text="text"
     label="Label"
     hide-selected
     chips
     multiple
-    @input="add"
   >
     <template v-slot:selection="{ attrs, item, select, selected }">
       <v-chip
@@ -53,16 +52,26 @@ export default {
   },
 
   computed: {
-    annotatedLabels() {
-      const labelIds = this.annotations.map(item => item.label)
-      return this.labels.filter(item => labelIds.includes(item.id))
-    },
-    labelObject() {
-      const obj = {}
-      for (const label of this.labels) {
-        obj[label.id] = label
+    annotatedLabels: {
+      get() {
+        const labelIds = this.annotations.map(item => item.label)
+        return this.labels.filter(item => labelIds.includes(item.id))
+      },
+      set(newValue) {
+        if (newValue.length > this.annotations.length) {
+          const label = newValue[newValue.length - 1]
+          if (typeof label === 'object') {
+            this.add(label)
+          } else {
+            newValue.pop()
+          }
+        } else {
+          const label = this.annotatedLabels.find(x => !newValue.some(y => y.id === x.id))
+          if (typeof label === 'object') {
+            this.remove(label.id)
+          }
+        }
       }
-      return obj
     }
   },
 
@@ -70,8 +79,7 @@ export default {
     textColor(backgroundColor) {
       return idealColor(backgroundColor)
     },
-    add(labels) {
-      const label = labels[labels.length - 1]
+    add(label) {
       this.addLabel(label.id)
     },
     remove(labelId) {