入力済みのタグ候補の背景色を変更する

resources/assets/js/components/MetadataPreview.vue

@@ -20,8 +20,8 @@
                                 <p class="card-text mb-2" style="font-size: small;">タグ候補<br><span class="text-secondary">(クリックするとタグ入力欄にコピーできます)</span></p>
                                 <ul class="list-inline d-inline">
                                     <li v-for="tag in suggestions"
-                                        class="list-inline-item badge badge-primary metadata-tag-item"
+                                        :class="tagClasses(tag)"
-                                        @click="addTag(tag)"><span class="oi oi-tag"></span> {{ tag }}</li>
+                                        @click="addTag(tag.name)"><span class="oi oi-tag"></span> {{ tag.name }}</li>
                                 </ul>
                             </template>
                         </div>
@@ -54,6 +54,11 @@
         }[],
     };
 
+    type Suggestion = {
+        name: string,
+        used: boolean,
+    }
+
     @Component
     export default class MetadataPreview extends Vue {
         @Prop() readonly state!: MetadataLoadState;
@@ -62,16 +67,37 @@
         // for use in v-if
         private readonly MetadataLoadState = MetadataLoadState;
 
+        tags: string[] = [];
+
+        created() {
+            bus.$on("change-tag", (tags: string[]) => this.tags = tags);
+        }
+
         addTag(tag: string) {
             bus.$emit("add-tag", tag);
         }
 
-        get suggestions() {
+        tagClasses(s: Suggestion) {
+            return {
+                "list-inline-item": true,
+                "badge": true,
+                "badge-primary": !s.used,
+                "badge-secondary": s.used,
+                "metadata-tag-item": true,
+            };
+        }
+
+        get suggestions(): Suggestion[] {
             if (this.metadata === null) {
                 return [];
             }
 
-            return this.metadata.tags.map(t => t.name);
+            return this.metadata.tags.map(t => {
+                return {
+                    name: t.name,
+                    used: this.tags.indexOf(t.name) !== -1
+                };
+            });
         }
 
         get hasImage() {

resources/assets/js/components/TagInput.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script lang="ts">
-    import {Vue, Component, Prop} from "vue-property-decorator";
+    import {Vue, Component, Prop, Watch} from "vue-property-decorator";
     import {bus} from "../checkin";
 
     @Component
@@ -56,6 +56,11 @@
             this.tags.splice(index, 1);
         }
 
+        @Watch("tags")
+        onTagsChanged() {
+            bus.$emit("change-tag", this.tags);
+        }
+
         get containerClass(): object {
             return {
                 "form-control": true,