Jquery datepicker не работает внутри v-for из Vue. js компонента в laravel - PullRequest
Новая
       76

Jquery datepicker не работает внутри v-for из Vue. js компонента в laravel

0 голосов
/ 05 августа 2020

Jquery средство выбора даты показывает странное поведение внутри v-for l oop в моем компоненте vue. js. За пределами l oop он работает нормально, и отображается выбор даты. Но внутри моего v-for l oop он не выбирает дату, как ожидалось.

Вот мой рабочий код выбора даты. (Рабочий случай) 

<div class="form-row">
    <div class="col-md-4 mb-3">
        <label for="date" class="col-form-label pt-0">For Week End</label>
        <input type="text" :name="`payrolls[${i}][payrol_date]`" class="form-control datepickere">
    </div>
</div>

Средство выбора даты не работает в этом случае (Нерабочий случай) 

<div v-for="(pay_roll, i) in payrolls" class="border border-primary p-3 rounded mb-3" :key="pay_roll.id">
    <div class="form-row">
        <div class="col-md-4 mb-3">
            <label for="date" class="col-form-label pt-0">For Week End</label>
            <input type="text" :name="`payrolls[${i}][payrol_date]`" class="form-control datepickere">
        </div>
    </div>
</div>

Вот мой Jquery код datepicker. 

$(".datepickere").datepicker({
    onSelect: function(dateText) {
        display("Selected date: " + dateText + ", Current Selected Value= " + this.value);
      $(this).change();
    }
}).on("change", function() {
    display("Change event");
});
function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
}

Хотя я дал класс вместо идентификатора, проблема все та же. Что не так?

...