2016-11-22 19 views
1

Ich möchte einen Datetimepicker in einem Komponenten-Eingabe-Tag machen. Ich habe Bootstrap-datetimpicker implementiert, aber wenn ich Datum wählen i cant Eingabewert in den Komponenten Methoden ( hier ein Beispiel: https://jsfiddle.net/ma9sgnd8/1/Ein einfacher Datepicker in VueJS

new Vue({ 
    el: '#app', 
    data: { 
    date: '' 
    }, 
    mounted: function() { 

     var args = { 

      format: 'MM/DD/YYYY' 
     }; 
     this.$nextTick(function() { 
      $('.datepicker').datetimepicker(args) 
     }); 

     this.$nextTick(function() { 
      $('.time-picker').datetimepicker({ 
      format: 'LT' 
      }) 
     }); 
    } 
}) 

Antwort

3

Es stellt sich heraus vue lauscht das input eve nt des Dom-Knotens, anstatt die value des js-Objekts zu überwachen (was vernünftig ist, weil es kein js-Objekt geben wird, bis wir document.querySelector() oder so). Beweis: in the doc, es sagt, dass wir einen .lazy Modifizierer zu hören können, um Ereignisse anstelle von input zu hören. Wenn das jQuery-basierte Bootstrap-Plugin die Eingabe value in js ändert, wird es von vue nicht erkannt.

Zum Glück, das Plugin provides a change event, so können wir die Ansicht-Modell Eigentum, wenn die Änderung Ereignis ausgelöst wird manuell eingestellt: https://jsfiddle.net/ma9sgnd8/4/

+0

Eine gute Lösung für mich. Vielen Dank. – pwnz22

1

Das Problem in Ihrer Datepicker ist, wenn Sie in der Konsole aussehen, es stürzt ab . und prob aktualisiert den Zustand richtig, versuchen Sie den Standard ein:

<div id="app"> 
    <div> 
    <input type="date" v-model="date"> 
    </div> 
    {{date}} 
</div> 

(oder Umverpackung wie https://github.com/charliekassel/vuejs-datepicker)

+0

Standard arbeitet. Aber ich brauche gestylt. – pwnz22