dimanche 24 juin 2018

Vue js checkbox custom component

i'm having problems with checkbox in vue.js component. My idea is to update parent model on child event(change).

<parent-component>
     <checkbox-component name="This is name"
                        :id="'This is Id'"
                        :val="'test'"
                        v-model="details"
                >
     <checkbox-component name="This is name 2"
                        :id="'This is Id 2'"
                        :val="'test2'"
                        v-model="details"
                >
     </checkbox-component>
</parent-component>

Here is component code:

    <template>
    <div>
        <input type="checkbox"
               :name="name"
               :id="id"
               :value="val"
               v-on:change="update($event)"
               autocomplete="off"
        />
        <div class="btn-group">
            <label :for="id" class="btn btn-default btn-sm">
                <span class="glyphicon glyphicon-ok"></span>
                <span> </span>
            </label>
            <label :for="id"
                   class="btn btn-default active btn-sm">
                
            </label>
        </div>
    </div>
</template>
<script>
    export default {
        model: {
            event: 'change'
        },
        props: {
            id: {
                required: true,
                type: String
            },
            name: {
                required: true,
                type: String
            },
            val: {
                required: true,
                type: String
            },

        },

        methods: {

            update(event){

                this.$emit('change',event.target.value);
            }

        },
    }
</script>

I would like to store checkbox values in details array, and to update it same as in https://vuejs.org/v2/guide/forms.html#Checkbox

What is happening now is that details[] is becoming string details with value of selected checkbox.

Is there some clean solution for this, or i need to write method to check if value is in array and slice/push it ?




Aucun commentaire:

Enregistrer un commentaire