====== Vue.js 3.x SwitchForm コンポーネント ====== ===== 要求 ===== * checkbox を Boolean 値の制御に使用するコンポーネント ===== コード ===== 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: `
`, props: { value: { type: Boolean }, errors: { 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' }, }, 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 ) }) function onChange(event) { context.emit('update:value', event.target.checked) } return { computedControlWrapperClasses, computedMessageWrapperClasses, onChange } } }; export default CheckboxForm;
===== Props ===== ^ Property ^ Type ^ Default ^ Description ^ | **value** | String | | v-model プロパティとして value を持つ | | **controlWrapperClasses** | Array | [] | select を囲う div タグに反映するクラス | | **controlWrapperStyles** | Object | {} | select を囲う div タグに反映するスタイル | | **controlClasses** | Array | [] | 入力コントロールに反映するクラス | | **controlStyles** | Object | {} | 入力コントロールに反映するスタイル | | **messageWrapperClasses** | Array | [] | エラーメッセージを囲う div タグに反映するクラス | | **errors** | Array | [] | エラーメッセージの配列 | | **controlErrorClass** | String | 'has-error' | コントロールに反映するエラークラス | | **messageErrorClass** | String | 'text-danger' | エラーメッセージに反映するエラークラス | ===== Events ===== ^ Event ^ Value ^ | **update:value** | 選択された値 | ===== Demo =====

コンポーネント実装


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