Vue.js 3.x TwoInputsForm コンポーネント

• 2 つの text input を実装するエラーメッセージ表示付きコンポーネント
• v-model 対応

TwoInputsForm.js

import { computed } from 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.11/vue.esm-browser.js';
import { getWrapClass } from 'https://wws.jp/_export/code/vuejs/vue3/form_utils?codeblock=0';
 
const TwoInputsForm = {
  template: `
    <div :class="computedFirstControlWrapperClasses" :style="controlWrapperStyles">
      <input class="form-control" :type="type"
        :class="controlClasses"
        :style="controlStyles"
        :value="firstValue"
        v-bind="$attrs"
        @input="$emit('update:firstValue', $event.target.value)"
      >
      <div :class="computedFirstMessageWrapperClasses" :style="messageWrapperStyles">
        <template v-for="msg in firstErrors">
          <span>{{ msg }}</span><br>
        </template>
      </div>
    </div>
    <div :class="computedSecondControlWrapperClasses" :style="controlWrapperStyles">
      <input class="form-control" :type="type"
        :class="controlClasses"
        :style="controlStyles"
        :value="secondValue"
        v-bind="$attrs"
        @input="$emit('update:secondValue', $event.target.value)"
      >
      <div :class="computedSecondMessageWrapperClasses" :style="messageWrapperStyles">
        <template v-for="msg in secondErrors">
          <span>{{ msg }}</span><br>
        </template>
      </div>
    </div>
  `,
  props: {
    type:                  { type: String, default: 'text' },
    firstValue:            { type: String, default: '' },
    secondValue:           { type: String, default: '' },
    firstErrors:           { type: Array,  default: [] },
    secondErrors:          { type: Array,  default: [] },
    controlWrapperClasses: { type: Array,  default: [] },
    controlWrapperStyles:  { type: Object, default: {} },
    controlClasses:        { type: Array,  default: [] },
    controlStyles:         { type: Object, default: {} },
    messageWrapperClasses: { type: Array,  default: [] },
    messageWrapperStyles:  { type: Object, default: {} },
    controlErrorClass:     { type: String, default: 'has-error' },
    messageErrorClass:     { type: String, default: 'text-danger' },
  },
  emits: ['update:firstValue', 'update:lastValue'],
  setup(props, context) {
    const computedFirstControlWrapperClasses = computed(() => {
      return getWrapClass(
        props.firstErrors,
        props.controlWrapperClasses,
        props.controlErrorClass
      )
    })
    const computedSecondControlWrapperClasses = computed(() => {
      return getWrapClass(
        props.secondErrors,
        props.controlWrapperClasses,
        props.controlErrorClass
      )
    })
    const computedFirstMessageWrapperClasses = computed(() => {
      return getWrapClass(
        props.firstErrors,
        props.messageWrapperClasses,
        props.messageErrorClass
      )
    })
    const computedSecondMessageWrapperClasses = computed(() => {
      return getWrapClass(
        props.secondErrors,
        props.messageWrapperClasses,
        props.messageErrorClass
      )
    })
    return {
      computedFirstControlWrapperClasses,
      computedFirstMessageWrapperClasses,
      computedSecondControlWrapperClasses,
      computedSecondMessageWrapperClasses
    }
  }
};
export default TwoInputsForm;

<html><style>th, td { padding: 12px !important }</style></html>

※ ここで記述されていない number や date, time などに指定可能なプロパティ min, max, step などは $attrs で input タグに自動的にバインドする.

<html><style>th, td { padding: 12px !important }</style></html>

<html>

<two-inputs-form
  type="date"
  placeholder="placeholder text"
  :control-wrapper-classes="['col-sm-4']"
  :second-errors="secondErrors"
  v-model:first-value="boundText1"
  v-model:second-value="boundText2"
>
</two-inputs-form>

<input type="text" class="form-control" :value="boundText1" @input="boundText1=$event.target.value">
<input type="text" class="form-control" :value="boundText2" @input="boundText2=$event.target.value">
<button @click="clearError">ClearError</button>
<button @click="appendError">AppendError</button>

<script type=“module”>
import { createApp } from 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.11/vue.esm-browser.js';
import TwoInputsForm from '/_export/code/vuejs/vue3/two_inputs_form?codeblock=0';

const App = {

components: {
  TwoInputsForm: TwoInputsForm
},
data() {
  return {
    boundText1: null,
    boundText2: null,
    secondErrors: ['Error Test']
  }
},
methods: {
  clearError() {
    //this.errors.splice(0, 1);
  },
  appendError() {
    //this.errors.splice(0, 0, 'error message B')
  }
}

}

createApp(App).mount('#app')
</script>
</html>