Vue JS复选框自定义组件

Question

我在vue.js组件中的复选框有问题。 我的想法是在子事件（更改）上更新父模型。

<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>

这是组件代码：

    <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">
                {{ name }}
            </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>

我想将复选框值存储在详细信息数组中，并像在https://vuejs.org/v2/guide/forms.html#Checkbox中一样对其进行更新

现在正在发生的事情是，details []变成具有选定复选框值的字符串详细信息。

是否有一些干净的解决方案，或者我需要编写方法来检查值是否在数组中并将其切片/推入？