タグ用のhidden inputもComponent内に含めるようにした

resources/assets/js/components/TagInput.vue

@@ -1,5 +1,6 @@
 <template>
     <div class="form-control h-auto" @click="$refs.input.focus()">
+        <input :name="name" type="hidden" :value="tagValue">
         <ul class="list-inline d-inline">
             <li v-for="(tag, i) in tags"
                 class="list-inline-item badge badge-primary tag-item"
@@ -17,30 +18,16 @@
 <script lang="ts">
     import {Vue, Component, Prop} from "vue-property-decorator";
 
-    function getElementByName(elementName: string): HTMLElement | null {
-        const elements = document.getElementsByName(elementName);
-        if (elements.length) {
-            return elements[0];
-        }
-        return null;
-    }
-
     @Component
     export default class TagInput extends Vue {
         @Prop(String) readonly id!: string;
-        @Prop(String) readonly input!: string;
+        @Prop(String) readonly name!: string;
+        @Prop(String) readonly value!: string;
         @Prop(Boolean) readonly isInvalid!: boolean;
 
-        tags: string[] = [];
+        tags: string[] = this.value.trim() !== "" ? this.value.trim().split(" ") : [];
         buffer: string = "";
 
-        mounted() {
-            const tags = getElementByName(this.input);
-            if (tags instanceof HTMLInputElement && tags.value.trim() !== "") {
-                this.tags = tags.value.split(" ")
-            }
-        }
-
         onKeyDown(event: KeyboardEvent) {
             if (this.buffer.trim() !== "") {
                 switch (event.key) {
@@ -50,7 +37,6 @@
                         if ((event as any).isComposing !== true) {
                             this.tags.push(this.buffer);
                             this.buffer = "";
-                            this.sync();
                         }
                         event.preventDefault();
                         break;
@@ -63,14 +49,10 @@
 
         removeTag(index: number) {
             this.tags.splice(index, 1);
-            this.sync();
         }
 
-        sync() {
+        get tagValue(): string {
-            const tags = getElementByName(this.input);
+            return this.tags.join(" ");
-            if (tags instanceof HTMLInputElement) {
-                tags.value = this.tags.join(" ");
-            }
         }
     }
 </script>

resources/views/ejaculation/checkin.blade.php

@@ -38,9 +38,8 @@
                 </div>
                 <div class="form-row">
                     <div class="form-group col-sm-12">
-                        <input name="tags" type="hidden" value="{{ old('tags') ?? $defaults['tags'] }}">
                         <label for="tagInput"><span class="oi oi-tags"></span> タグ</label>
-                        <tag-input id="tagInput" input="tags" :is-invalid="{{ $errors->has('tags') ? 'true' : 'false' }}"></tag-input>
+                        <tag-input id="tagInput" name="tags" value="{{ old('tags') ?? $defaults['tags'] }}" :is-invalid="{{ $errors->has('tags') ? 'true' : 'false' }}"></tag-input>
                         <small class="form-text text-muted">
                             Tab, Enter, 半角スペースのいずれかで入力確定します。
                         </small>

resources/views/ejaculation/edit.blade.php

@@ -39,9 +39,8 @@
                 </div>
                 <div class="form-row">
                     <div class="form-group col-sm-12">
-                        <input name="tags" type="hidden" value="{{ old('tags') ?? $ejaculation->textTags() }}">
                         <label for="tagInput"><span class="oi oi-tags"></span> タグ</label>
-                        <tag-input id="tagInput" input="tags" :is-invalid="{{ $errors->has('tags') ? 'true' : 'false' }}"></tag-input>
+                        <tag-input id="tagInput" name="tags" value="{{ old('tags') ?? $ejaculation->textTags() }}" :is-invalid="{{ $errors->has('tags') ? 'true' : 'false' }}"></tag-input>
                         <small class="form-text text-muted">
                             Tab, Enter, 半角スペースのいずれかで入力確定します。
                         </small>