Vue-Component に Bootstrap の Cleckbox Class をあと付けする

環境

Vue.js
Bootstrap
javascript
css

前の記事

結論

app.js

const bootStrapCkeckbox = Vue.component('bootstrap-checkbox', {
    template:`
    <div>
        <template
            v-for"(opt, idx) of options"
        >
            <div
                :key="idx"
                :class="classes.div||''"
                >
                <input
                    type="ckeckbox"
                    :class="classes.input||''"
                    :name="name"
                    :id="name+idx"
                    :checked="value.indexOf(opt) !== -1"
                    v-bind:value="opt"
                    v-on:change="onChange"
                />
                <label
                    :for="name+idx"
                    :class="classes.label||''"
                >
                {{opt}}
                </label>
            </div>
        </template>
    </div>
    `,
    name:String,
    props:{
        classes:{
            type:Object,
            default: () => {
                return {
                    input,label, dev
                };
            }
        },
        value:{
            type:Array,
            default: () => {
                return [];
            }
        },
        options:{
            type:Array,
            default: () => {
                return [];
            }
        }
    },
    data(){
        return {
            values:[]
        };
    },
    methods:{
        onChange(event){
            let elem = event.target;
            let val = elem.value;

            if(elem.checked){
                this.values.push(val);
            }else{
                this.values = this.values.filter((v) => {
                    return (v !== val);
                });
            }

            //update bind value.
            this.$emit('input', this.values);
        }
    },
    created(){
        //Memory of initial selection value.
        this.values = this.value.concat(this.values);
    }
});

let app = new vue({
    el: '#app',
    components: {
        'bootstrap-checkbox': bootstrapCheckbox
    },
    data: {
        values: ['りんご']
    }
});

index.html

<div id="app">
    <fieldset class="form-group">
        <div class="row">
            <legend
                class="col-form-label col-sm-2 pt-0"
            >Vue-Component Bootstrap Checkbox Demo</legend>
            <bootstrap-checkbox
                name="checkbox_demo"
                class="col-sm-10"
                :options="['りんご','みかん','なし']"
                :classes="{
                    'div':'form-check',
                    'input': 'form-check-input',
                    'label': 'form-check-label'
                }"
                v-model="values"
            >
            </bootstrap-checkbox>
        </div>
    </fieldset>
</div>

参考

上記のコードを参考の事

メモ

• Vue-Component で Class 属性の binding は、template の一番外側（親要素）にしか binding されない
• 子要素とも言えない template の内部要素に関しては、props 経由でやるしかない（私が知る限り）
• Vue-Component の汎用性は下がるが、Bootstrap を選択した時点で、ある程度は Bootstrap 側の仕様に合わせたほうが得策なので、一旦目をつぶる