Vue.js i jQuery datepicker/timepicker wiążące

Question

Two-way binding with Vue.js wykorzystaniem elementu <input> nie działa, gdy jQuery datepicker i/lub timepicker aktualizuje wartość <input> dwukierunkowy. Wiązanie ma miejsce tylko wtedy, gdy użytkownik wpisze w numerze <input>.

Potrzebuję dwustronnego wiązania, aby się stało, gdy <input> jest aktualizowany za pomocą datepicker lub timepicker.

Używam Vue.js i jQuery w najprostszy sposób - importując je z mojego pliku html poprzez znaczniki <script src=""></script>.

To wydanie is known and has solutions, ale w bardziej złożonych sytuacjach niż moje. Mam problem z ustaleniem, jakie rozwiązania znalazłem w moim podstawowym przypadku użycia (tzn. Nie używam niestandardowych dyrektyw, komponentów lub szablonów zdarzeń).

Oto codepen of my working code.

A oto główne części mojego kodu statycznego:

<form> 
    <input v-model="title" name="title" type="text"> 
    <input v-model="shortDesc" name="shortDesc" type="text"> 
    <input v-model="date" name="date" type="text"> 
    <input v-model="time" name="time" type="text"> 
</form> 

<script> 
    var elm = new Vue({ 
    el: '#preview', 
    data: { 
     title: '', 
     shortDesc: '', 
     date: '', 
     time: '' 
    } 
    }) 

    $(function(){ 
    $("input[name=date]").datepicker({ 
     dateFormat: 'DD, MM dd' 
    }); 
    }); 


    $('input[name=time]').timepicker({'scrollDefault': 'now'}); 
</script> 

Answer 1

nie jestem w stanie znaleźć vue czystą sposób to zrobić, ale można to zrobić za pomocą onSelect oddzwanianie datapicker, można ustaw wartość zmiennej daty w tym wywołaniu zwrotnym.

Zobacz działający kodek here.

Dodałem jest zamontowany blok w instancji vue:

var elm = new Vue({ 
    ... 
    ... 
    mounted() { 
    var vm = this 
    $('#datedate').datepicker({ 
     onSelect: function(dateText) { 
     vm.date = dateText 
     } 
    }) 
}) 

i dodał w atrybucie id w wejściu data:

<input v-model="date" name="date" class="block col-12 mb1 field" type="text" id="datedate"> 

---

EDIT

Rejestracja timepicker nie ma tego onSelect option datepicker ma, rozwiązaniem jest użycie changeTime event, który jest wyświetlany w akcji w "Event Example" in the timepicker demo docs.

Poniższy kod zapewnia zaktualizowany skrypt Vue z rozwiązaniami zarówno datepicker jQuery i timepicker:

var elm = new Vue({ 
    ... 
    ... 
    mounted() { 
    var vm = this 
    $('input[name=date]').datepicker({ 
     dateFormat: 'DD, MM dd', 
     onSelect: function(dateText) { 
     vm.date = dateText 
     } 
    }), 
    $('input[name=time]').timepicker({'scrollDefault': 'now'}).on('changeTime', function() { 
     vm.time = $('input[name=time]').val(); 
    }) 
    } 
}) 

A oto new codepen verifying both @saurabh's datepicker solution and @BrianZ's timepicker solution.