Wie wird ein Ereignis ausgelöst, wenn sich das V-Modell ändert?

90

Ich versuche, die foo()Funktion mit dem zu starten, @clickaber wie Sie sehen können, müssen Sie das Optionsfeld zweimal drücken, um das Ereignis korrekt auszulösen. Erfassen Sie den Wert erst beim zweiten Drücken von ...

Ich möchte das Ereignis auslösen, ohne es @clicknur v-modelauszulösen, wenn sich (srStatus) ändert.

Hier ist meine Geige:

http://fiddle.jshell.net/wanxe/vsa46bw8/

javascript events vue.js

— jnieto
quelle

1

Geigenlink funktioniert nicht mehr.

— FrenkyB

Wenn die Absicht des Aufrufs darin foo()besteht, keine Vorlagenänderungen vorzunehmen, verwenden Sie awatcher

— Saksham

Dies ist ein gutes Beispiel dafür, warum in der Frage Code erforderlich ist . Bitte stellen Sie es nach Möglichkeit wieder her und zeigen Sie es hier.

— Isherwood

Ich wünschte, ich könnte den Code für die Frage abrufen, aber es war bereits vor 5 Jahren ... zum Glück haben wir gute Antworten

— jnieto

75

Dies liegt daran, dass Ihr clickHandler ausgelöst wird, bevor sich der Wert des Optionsfelds ändert. Sie müssen changestattdessen das Ereignis anhören :

<input 
  type="radio" 
  name="optionsRadios" 
  id="optionsRadios2" 
  value=""
  v-model="srStatus" 
  v-on:change="foo"> //here

Stellen Sie außerdem sicher, dass Sie wirklich foo()bereit anrufen möchten. Vielleicht möchten Sie das auch nicht.

ready:function(){
    foo();
},

— Pherris
quelle

Wie würden Sie mit Slidern umgehen?

— Royi

Wo sind die verfügbaren Ereignisse in der Dokumentation aufgeführt? Ich kann es nicht finden

— Toraman

Dies sind nur Standard-JavaScript-Ereignisse, die Sie hier finden können: developer.mozilla.org/en-US/docs/Web/Events#Standard_events

— pherris

Vielen Dank! Aber fertig: Funktion hat bei mir nicht funktioniert. Stattdessen Methoden: {foo () {// etwas tun}}

— Vince Banzon

Beachten Sie außerdem, dass stattdessen "v-on: input" verwendet werden sollte, wenn Sie "v-on: change" -Ereignisse für eine benutzerdefinierte vue-Komponente (einzelne Dateikomponente) registrieren möchten.

— Andrés Biarge

93

Sie können dies tatsächlich vereinfachen, indem Sie die v-onAnweisungen entfernen :

<input type="radio" name="optionsRadios" id="optionsRadios1" value="1" v-model="srStatus">

Und verwenden Sie die watchMethode, um auf die Änderung zu warten:

new Vue ({
    el: "#app",
    data: {
        cases: [
            { name: 'case A', status: '1' },
            { name: 'case B', status: '0' },
            { name: 'case C', status: '1' }
        ],
        activeCases: [],
        srStatus: ''
    },
    watch: {
        srStatus: function(val, oldVal) {
            for (var i = 0; i < this.cases.length; i++) {
                if (this.cases[i].status == val) {
                    this.activeCases.push(this.cases[i]);
                    alert("Fired! " + val);
                }
            }
        }
    }
});

— Stephen Hallgren
quelle

2

Können Sie automatisch einen Modellwechsel beobachten? Zum Beispiel für ein Formular mit mehreren Eingaben, das alle überwacht werden muss?

— Eric Burel

@ EricBurel Ich weiß, das ist alt, aber die Antwort ist nein. Sie können nicht das gesamte Datenobjekt überwachen, an das alle Felder gebunden sind. Sie müssten jede einzelne Eigenschaft dieses Objekts einzeln überwachen, was diesen Ansatz für große Datensätze in Formularen mit vielen Feldern problematisch macht.

— JohnC

1

@EricBurel Tatsächlich können Sie verschachtelte Objekte mit der Eigenschaft 'deep' auf 'true' sehen -> vuejs.org/v2/api/#watch

— SanBen

27

Vue2: Wenn Sie Änderungen nur bei Eingabeunschärfe erkennen möchten (z. B. nachdem Sie die Eingabetaste gedrückt haben oder auf eine andere Stelle klicken), tun Sie dies (weitere Informationen hier ).

<input @change="foo" v-model... >

Wenn Sie Änderungen einzelner Zeichen (während der Benutzereingabe) erkennen möchten, verwenden Sie

<input @keydown="foo" v-model... >

Sie können auch @keyupund @inputEreignisse verwenden. Wenn Sie zusätzliche Parameter übergeben möchten, verwenden Sie in der Vorlage z @keyDown="foo($event, param1, param2)". Vergleich unten (bearbeitbare Version hier )

Code-Snippet anzeigen

new Vue({
  el: "#app",
  data: { 
    keyDown: { key:null, val: null,  model: null, modelCopy: null },
    keyUp: { key:null, val: null,  model: null, modelCopy: null },
    change: { val: null,  model: null, modelCopy: null },
    input: { val: null,  model: null, modelCopy: null },
    
    
  },
  methods: {
  
    keyDownFun: function(event){                   // type of event: KeyboardEvent   
      console.log(event);  
      this.keyDown.key = event.key;                // or event.keyCode
      this.keyDown.val = event.target.value;       // html current input value
      this.keyDown.modelCopy = this.keyDown.model; // copy of model value at the moment on event handling
    },
    
    keyUpFun: function(event){                     // type of event: KeyboardEvent
      console.log(event);  
      this.keyUp.key = event.key;                  // or event.keyCode
      this.keyUp.val = event.target.value;         // html current input value
      this.keyUp.modelCopy = this.keyUp.model;     // copy of model value at the moment on event handling
    },
    
    changeFun: function(event) {                   // type of event: Event
      console.log(event);
      this.change.val = event.target.value;        // html current input value
      this.change.modelCopy = this.change.model;   // copy of model value at the moment on event handling
    },
    
    inputFun: function(event) {                    // type of event: Event
      console.log(event);
      this.input.val = event.target.value;         // html current input value
      this.input.modelCopy = this.input.model;     // copy of model value at the moment on event handling
    }
  }
})

div {
  margin-top: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

Type in fields below (to see events details open browser console)

<div id="app">
  <div><input type="text" @keyDown="keyDownFun" v-model="keyDown.model"><br> @keyDown (note: model is different than value and modelCopy)<br> key:{{keyDown.key}}<br> value: {{ keyDown.val }}<br> modelCopy: {{keyDown.modelCopy}}<br> model: {{keyDown.model}}</div>
  
  <div><input type="text" @keyUp="keyUpFun" v-model="keyUp.model"><br> @keyUp (note: model change value before event occure) <br> key:{{keyUp.key}}<br> value: {{ keyUp.val }}<br> modelCopy: {{keyUp.modelCopy}}<br> model: {{keyUp.model}}</div>
  
  <div><input type="text" @change="changeFun" v-model="change.model"><br> @change (occures on enter key or focus change (tab, outside mouse click) etc.)<br> value: {{ change.val }}<br> modelCopy: {{change.modelCopy}}<br> model: {{change.model}}</div>
  
  <div><input type="text" @input="inputFun" v-model="input.model"><br> @input<br> value: {{ input.val }}<br> modelCopy: {{input.modelCopy}}<br> model: {{input.model}}</div>
     
</div>

Erweitern Sie das Snippet

— Kamil Kiełczewski
quelle

keyDown funktioniert nicht als 'Rücktaste' gedrückt. Also ist es besser, @input

— Peretz30

In dieser Geige sehen wir, dass die @keyDown Rücktaste mit jsfiddle.net/rLzm0f1q funktioniert (ich sage jedoch nicht, dass @inputdas gut oder schlecht ist)

— Kamil Kiełczewski

21

Sie sollten verwenden @input:

<input @input="handleInput" />

@input wird ausgelöst, wenn der Benutzer den Eingabewert ändert.

@change Wird ausgelöst, wenn der Benutzer den Wert geändert und die Eingabe aufgehoben hat (z. B. irgendwo außerhalb geklickt).

Sie können den Unterschied hier sehen: https://jsfiddle.net/posva/oqe9e8pb/

— Peretz30
quelle

Was können Sie anstelle von @ sign verwenden? Gibt es irgendwo eine Regel dazu? Ich frage dies, weil in meinem Backend @ sign für etwas anderes reserviert ist.

— FrenkyB

10

Nur um die richtige Antwort oben hinzuzufügen, können Sie in Vue.JS v1.0 schreiben

<a v-on:click="doSomething">

In diesem Beispiel wäre es also so

 v-on:change="foo"

Siehe: http://v1.vuejs.org/guide/syntax.html#Arguments

— Matthew
quelle