Vue JS флажок пользовательский компонент - PullRequest
Новая
       8

Vue JS флажок пользовательский компонент

0 голосов
/ 24 июня 2018

У меня проблемы с флажком в компоненте 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 [] становится строковыми деталями со значением выбранного флажка.

Есть ли какое-то чистое решение для этого, или мне нужно написать метод, чтобы проверить, есть ли значение в массиве, и нарезать / протолкнуть его?

...