Bagaimana cara mengaktifkan peristiwa ketika v-model berubah?

95

Saya mencoba untuk mengaktifkan foo()fungsi dengan @clicktapi seperti yang Anda lihat, perlu menekan tombol radio dua kali untuk mengaktifkan acara dengan benar. Hanya tangkap nilainya saat kedua kali Anda menekan ...

Saya ingin mengaktifkan acara tanpa @clickhanya mengaktifkan acara ketika v-model(srStatus) berubah.

ini biola saya:

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

jnieto
sumber
1
link biola tidak lagi berfungsi.
FrenkyB
Jika maksud panggilan foo()adalah untuk membuat perubahan non template, gunakanwatcher
Saksham
Ini adalah contoh bagus mengapa kode diperlukan dalam pertanyaan . Harap pulihkan jika memungkinkan dan tunjukkan di sini.
isherwood
Saya berharap saya dapat mengambil kode untuk pertanyaan itu, tetapi itu sudah 5 tahun yang lalu ... untungnya kami memiliki jawaban yang baik
jnieto

Jawaban:

79

Ini terjadi karena clickpenangan Anda aktif sebelum nilai tombol radio berubah. Anda perlu mendengarkan changeacara tersebut sebagai gantinya:

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

Juga, pastikan Anda benar-benar ingin menelepon foo()siap ... sepertinya Anda tidak benar-benar ingin melakukan itu.

ready:function(){
    foo();
},
pherris
sumber
Bagaimana Anda menangani Sliders?
Royi
di mana acara yang tersedia tercantum dalam dokumentasi. Saya tidak dapat menemukannya?
toraman
Ini hanya acara JavaScript standar yang dapat Anda temukan di sini: developer.mozilla.org/en-US/docs/Web/Events#Standard_events
pherris
Terima kasih! Tapi Siap: fungsi tidak berhasil untuk saya. Sebaliknya, metode: {foo () {// do something}}
Vince Banzon
Perhatikan juga bahwa jika Anda ingin mendaftarkan peristiwa "v-on: change" pada komponen vue kustom (komponen file tunggal), "v-on: input" sebaiknya digunakan.
Andrés Biarge
99

Anda sebenarnya dapat menyederhanakan ini dengan menghapus v-onarahan:

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

Dan gunakan watchmetode untuk mendengarkan perubahan:

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
sumber
2
Bisakah Anda menonton secara otomatis perubahan model apa pun? Misalnya untuk formulir dengan banyak input yang semua perlu diawasi?
Eric Burel
@EricBurel Saya tahu ini sudah tua, tetapi jawabannya tidak. Anda tidak dapat melihat seluruh objek data yang terikat pada semua bidang, Anda perlu memperhatikan setiap properti dari objek tersebut secara individual sehingga pendekatan ini bermasalah untuk rekaman besar pada formulir dengan banyak bidang.
JohnC
1
@EricBurel Sebenarnya Anda dapat menonton objek bersarang dengan properti 'deep' disetel ke 'true' -> vuejs.org/v2/api/#watch
SanBen
29

Vue2: jika Anda hanya ingin mendeteksi perubahan pada input blur (misalnya setelah tekan enter atau klik di tempat lain) lakukan (info lebih lanjut di sini )

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

Jika Anda ingin mendeteksi perubahan karakter tunggal (selama mengetik pengguna) gunakan

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

Anda juga dapat menggunakan @keyupdan @inputacara. Jika Anda ingin melewatkan parameter tambahan, gunakan dalam template misalnya @keyDown="foo($event, param1, param2)". Perbandingan di bawah (versi yang dapat diedit di sini )

Kamil Kiełczewski
sumber
keyDown tidak berfungsi daripada 'backspace' yang ditekan. Jadi lebih baik menggunakan @input
Peretz30
Dalam biola ini kita melihat bahwa backspace bekerja dengan @keyDown jsfiddle.net/rLzm0f1q (namun saya tidak mengatakan itu @inputburuk atau baik)
Kamil Kiełczewski
24

Anda harus menggunakan @input:

<input @input="handleInput" />

@input terbakar ketika pengguna mengubah nilai input.

@change terbakar ketika pengguna mengubah nilai dan tidak fokus input (misalnya diklik di suatu tempat di luar)

Anda dapat melihat perbedaannya di sini: https://jsfiddle.net/posva/oqe9e8pb/

Peretz30
sumber
Apa yang dapat Anda gunakan selain tanda @? Apakah ada aturan yang tertulis di suatu tempat tentang ini? Saya menanyakan ini karena di backend saya, tanda @ dicadangkan untuk sesuatu yang lain.
FrenkyB