Jak uruchomić wydarzenie, gdy zmienia się model v?

95

Próbuję uruchomić foo()funkcję za pomocą, @clickale jak widzisz, muszę dwukrotnie nacisnąć przycisk radiowy, aby poprawnie uruchomić zdarzenie. Wyłap wartość tylko przy drugim naciśnięciu ...

Chcę odpalić zdarzenie bez wywoływania zdarzenia @clicktylko po v-modelzmianie (srStatus).

oto moje Fiddle:

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

jnieto
źródło
1
link skrzypcowy już nie działa.
FrenkyB
Jeśli intencją wywołania foo()jest wprowadzenie zmian innych niż szablon, użyjwatcher
Saksham
To świetny przykład, dlaczego w pytaniu wymagany jest kod . Jeśli to możliwe, odzyskaj je i pokaż tutaj.
isherwood
Chciałbym móc odzyskać kod do pytania, ale to było już 5 lat temu ... na szczęście mamy dobre odpowiedzi
jnieto

Odpowiedzi:

79

Dzieje się tak, ponieważ clickprogram obsługi uruchamia się przed zmianą wartości przycisku opcji. Zamiast tego musisz posłuchać changezdarzenia:

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

Upewnij się również, że naprawdę chcesz zadzwonić foo()do nas, gotowy ... wydaje się, że może nie chcesz tego robić.

ready:function(){
    foo();
},
pherris
źródło
Jak poradzisz sobie ze Sliderami?
Royi
gdzie są dostępne wydarzenia wymienione w dokumentacji. Nie mogę tego znaleźć?
toraman
To tylko standardowe zdarzenia JavaScript, które można znaleźć tutaj: developer.mozilla.org/en-US/docs/Web/Events#Standard_events
pherris
Dzięki! Ale gotowe: funkcja nie działa dla mnie. Zamiast tego metody: {foo () {// zrób coś}}
Vince Banzon
Zwróć też uwagę, że jeśli chcesz zarejestrować zdarzenia „v-on: change” w niestandardowym komponencie vue (komponent jednoplikowy), zamiast tego należy użyć opcji „v-on: input”.
Andrés Biarge
99

Możesz to uprościć, usuwając v-ondyrektywy:

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

I użyj watchmetody, aby nasłuchiwać zmiany:

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
źródło
2
Czy możesz oglądać automatycznie każdą zmianę modelu? Na przykład w przypadku formularza z wieloma danymi wejściowymi, które należy obserwować?
Eric Burel
@EricBurel Wiem, że to jest stare, ale odpowiedź brzmi: nie. Nie możesz obserwować całego obiektu danych, do którego są przypisane wszystkie pola, musiałbyś obserwować każdą pojedynczą właściwość tego obiektu osobno, co sprawia, że ​​takie podejście jest problematyczne w przypadku dużych rekordów w formularzach z wieloma polami.
JohnC
1
@EricBurel Właściwie możesz oglądać zagnieżdżone obiekty z właściwością „deep” ustawioną na „true” -> vuejs.org/v2/api/#watch
SanBen
29

Vue2: jeśli chcesz tylko wykryć zmianę przy rozmyciu wejścia (np. Po naciśnięciu enter lub kliknięciu gdzie indziej) zrób (więcej informacji tutaj )

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

Jeśli chcesz wykryć zmiany pojedynczych znaków (podczas pisania przez użytkownika) użyj

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

Możesz także użyć @keyupi @inputwydarzeń. Jeśli chcesz przekazać dodatkowe parametry użyj w szablonie np @keyDown="foo($event, param1, param2)". Porównanie poniżej (wersja do edycji tutaj )

Kamil Kiełczewski
źródło
keyDown nie działa po naciśnięciu klawisza „Backspace”. Więc lepiej jest użyć @input
Peretz30
Na tych skrzypcach widzimy, że backspace współpracuje z @keyDown jsfiddle.net/rLzm0f1q (jednak nie mówię, że @inputto źle czy dobrze)
Kamil Kiełczewski
24

Powinieneś użyć @input:

<input @input="handleInput" />

@input uruchamia się, gdy użytkownik zmienia wartość wejściową.

@change uruchamia się, gdy użytkownik zmienił wartość i przestał koncentrować dane wejściowe (na przykład kliknął gdzieś na zewnątrz)

Możesz zobaczyć różnicę tutaj: https://jsfiddle.net/posva/oqe9e8pb/

Perec30
źródło
Czego możesz użyć zamiast znaku @? Czy jest gdzieś napisana jakaś zasada na ten temat? Pytam o to, ponieważ w moim backendzie znak @ jest zarezerwowany na coś innego.
FrenkyB