Datepicker npm пакет не работает в репитере - PullRequest
Новая
       3

Datepicker npm пакет не работает в репитере

0 голосов
/ 11 января 2020

Я застрял в том, что не вижу правильного решения.

Я использую пакет "vue - bootstrap -datepicker" npm в мой проект.

Я хотел использовать указатель даты в репитерах. Но только первый ряд сборщика данных ретранслятора работает нормально, но сборщик дат других детей не работает.

Повторители 

<template>
    <!-- Repeater -->
    <div v-if="q.input_type === 'repeater'" class="kt_repeaters">
        <div class="form-group form-group-last row">
            <div data-repeater-list="" class="col-lg-12">
                <div data-repeater-item class="form-group row align-items-center">

                    <!-- Dynamic inputs [text, radio, select] -->
                    <input-fields v-for="(cq, c) in q.children" v-bind:key="cq.id" :q="cq" :answer="answer"></input-fields>

                    <div class="col-md-3">
                        <a href="javascript:;" data-repeater-delete="" class="btn-sm btn btn-label-danger btn-bold">
                            <i class="la la-trash-o"></i>
                            Delete
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group form-group-last row">
            <div class="col-lg-4">
                <a href="javascript:;" data-repeater-create="" class="btn btn-bold btn-sm btn-label-brand">
                    <i class="la la-plus"></i> Add
                </a>
            </div>
        </div>
    </div>
</template>

<script>
    import inputFields from './InputFields';

    export default{
        components: {
            inputFields
        }
    }
</script>

Поля ввода 

<template>
    <!-- Date -->
    <div v-else-if="q.input_type === 'date')">
        <label>{{ q.title }}</label>
        <div class="input-group date">
            <date-picker class="form-control" :config="options"></date-picker>
            <div class="input-group-append">
                <span class="input-group-text">
                    <i class="la la-calendar"></i>
                </span>
            </div>
        </div>
    </div>
</template>

<script>
    import datePicker from 'vue-bootstrap-datetimepicker';

    export default{
        props: ['q', 'answer'],
        components: {
            datePicker
        },
        data: function() {
            return {
                options: {
                    format: 'DD/MM/YYYY',
                    useCurrent: false,
                },
            }
        },
    }
</script>
...