Kann Vuejs2 V-Modell nicht von nativem JavaScript ändern Ereignis ändern

Question

Ich versuche herauszufinden, wie native Javascript-Ereignisse auf eine Eingabe ausgelöst werden, vorausgesetzt, ich möchte ein Datenattribut in meiner Vue-Instanz zu aktualisieren.

ich gesucht habe ein bisschen auf die Frage (und das ist, wie ich in die Rolle bekam, die die Lösung schlägt vor, eine native JavaScript-Event) aufgrund dieser Beitrag https://github.com/vuejs/vue/issues/96#issuecomment-37870300

So habe ich diesen Eingang:

<input type="text" name="occurred" id="occurred" class="form-control" required="" v-model="occurred"> 

Und durch Javascript, ich bin versucht zu kapier nativer Ereignis ist, so dass vue v-Modell aktualisieren = "aufgetreten" (ich bin mit pickadate.js)

$('#occurred').pickadate({ 
    format: 'dddd, dd mmm, yyyy', 
    formatSubmit: 'dd-mm-yyyy', 
    hiddenPrefix: 'prefix__', 
    hiddenSuffix: '__suffix' 
}); 

var evt = document.createEvent('HTMLEvents'); 
evt.initEvent('change', true, true); 

var el = document.getElementById("occurred"); 
el.dispatchEvent(evt); 

Ich habe ein paar verschiedene Möglichkeiten ausprobiert, aber ich kann nicht ganz verstehen, wie es funktioniert.

Ich wäre super froh, wenn Sie mir die Lösung erklären könnten, anstatt sie nur so zu geben, wie ich es verstehen will.

Ich habe eine Geige geschaffen, um zu erklären: https://jsfiddle.net/c1askwj2/5/

edit: Eine Lösung ist zu tun, was ich will nicht zu tun. Im Grunde genommen „aussetzen“ View Objekt:

var vueFoo = new Vue({ ... }); 

Auf diese Weise können sie durch varFoo.thedate zugreifen können und setzen Sie ihn:

$('#thedate').pickadate({ 
    onSet: function(value) { 
    var date = new Date(value.select); 
    vueFoo.thedate = date.getDate() + '-' + date.getMonth() + 1 + '-' + date.getFullYear(); 
    } 
}); 

mir Dies ist eine sehr hässliche Lösung, wie Ich mag meine halten Vue-Objekte nicht verfügbar ...

Answer 1

Sie müssen das Ereignis on change an der Eingabe behandeln, um das Ansichtsmodell zu aktualisieren und den Wert für die Datumsauswahl durch Beobachten des Ansichtsmodells festzulegen. Dies wäre viel einfacher, wenn Sie die Datumsauswahl in eine eigene Komponente abstrahieren, aber es gibt ein funktionierendes Beispiel, das auf Ihrem Code unten basiert.

Lesen Sie mehr über hier zu beobachten: https://vuejs.org/v2/api/#watch

// Init Vue 
new Vue({ 
    el: '#vueDate', 
    data: { 
    thedate: '00-00-0000', 
    thedate_counter: 0, 
    picker: null 
    }, 
    mounted: function() {  
    var el = $('#thedate') 
    this.picker = el.pickadate().pickadate('picker') 
    var vm = this 
    el.on('change', function() { 
      vm.thedate = this.value 
     }) 
    }, 
    watch: { 
    thedate: function(value) { 
     this.picker.set('select', value) 
    } 
    } 
});