====== Vue.js 3.x CheckboxForm コンポーネント ====== ===== 要求 ===== * checkbox タグのエラーメッセージ表示付きコンポーネント * 複数の選択候補から選択する複数チェックボックスとして機能させたい * 単一フィールドの Boolean 値切り替え用途は [[ vuejs:vue3:switch_form | SwitchForm ]] を参照 ===== コード =====


import { computed } from 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.2/vue.esm-browser.js';
import { getWrapClass, generalizeOptions } from 'https://wws.jp/_export/code/vuejs/vue3/form_utils?codeblock=0';

const CheckboxForm = {
  template: `
    
      
        
        {{ opt.title }}
      
      
        
      
    
  `,
  props: {
    value:                 { type: Array },
    options:               { type: Array,  default: [] },
    errors:                { type: Array,  default: [] },
    controlWrapperClasses: { type: Array,  default: [] },
    controlWrapperStyles:  { type: Object, default: {} },
    controlClasses:        { type: Array,  default: [] },
    controlStyles:         { type: Object, default: {} },
    optionClasses:         { type: Array,  default: ['checkbox-inline'] },
    optionStyles:          { type: Object, default: {} },
    messageWrapperClasses: { type: Array,  default: [] },
    messageWrapperStyles:  { type: Object, default: {} },
    controlErrorClass:     { type: String, default: 'has-error' },
    messageErrorClass:     { type: String, default: 'text-danger' },
  },

  setup(props, context) {
    const computedControlWrapperClasses = computed(() => {
      return getWrapClass(
        props.errors,
        props.controlWrapperClasses,
        props.controlErrorClass
      )
    })

    const computedMessageWrapperClasses = computed(() => {
      return getWrapClass(
        props.errors,
        props.messageWrapperClasses,
        props.messageErrorClass
      )
    })

    const computedOptions = computed(() => {
      return generalizeOptions(props.options)
    })

    function onChange(v) {
      const idx = props.value.indexOf(v)
      if (idx >= 0) {
        props.value.splice(idx, 1)
      } else {
        props.value.splice(0, 0, v)
      }
      context.emit('update:value', props.value)
    }

    function isChecked(v) {
      return (props.value.indexOf(v) >= 0) ? true : false
    }

    return {
      computedControlWrapperClasses,
      computedMessageWrapperClasses,
      computedOptions,
      isChecked,
      onChange
    }
  }
};
export default CheckboxForm;

===== Props ===== ^ Property ^ Type ^ Default ^ Description ^ | **options** | Array | [] | select タグの選択肢 option を指定\\ { title: 表示名, value: 値 } 形式のオブジェクトを要素とする配列\\ または、要素に "title" プロパティが存在しない場合、単に値の配列として { title: 値, value: 値 } の配列に自動的に変換される | | **value** | String | | v-model プロパティとして value を持つ | | **controlWrapperClasses** | Array | [] | select を囲う div タグに反映するクラス | | **controlWrapperStyles** | Object | {} | select を囲う div タグに反映するスタイル | | **controlClasses** | Array | [] | 入力コントロールに反映するクラス | | **controlStyles** | Object | {} | 入力コントロールに反映するスタイル | | **optionClasses** | Array | [] | 選択肢テキストに反映するクラス | | **optionStyles** | Object | {} | 選択肢テキストに反映するスタイル | | **messageWrapperClasses** | Array | [] | エラーメッセージを囲う div タグに反映するクラス | | **errors** | Array | [] | エラーメッセージの配列 | | **controlErrorClass** | String | 'has-error' | コントロールに反映するエラークラス | | **messageErrorClass** | String | 'text-danger' | エラーメッセージに反映するエラークラス | ===== Events ===== ^ Event ^ Value ^ | **update:value** | 選択された値 | ===== Demo =====

コンポーネント実装

データバインディング確認用フォーム