Saya mencoba untuk mengaktifkan foo()
fungsi dengan @click
tapi 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 @click
hanya mengaktifkan acara ketika v-model
(srStatus) berubah.
ini biola saya:
javascript
events
vue.js
jnieto
sumber
sumber
foo()
adalah untuk membuat perubahan non template, gunakanwatcher
Jawaban:
Ini terjadi karena
click
penangan Anda aktif sebelum nilai tombol radio berubah. Anda perlu mendengarkanchange
acara 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(); },
sumber
Anda sebenarnya dapat menyederhanakan ini dengan menghapus
v-on
arahan:<input type="radio" name="optionsRadios" id="optionsRadios1" value="1" v-model="srStatus">
Dan gunakan
watch
metode 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); } } } } });
sumber
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
@keyup
dan@input
acara. Jika Anda ingin melewatkan parameter tambahan, gunakan dalam template misalnya@keyDown="foo($event, param1, param2)"
. Perbandingan di bawah (versi yang dapat diedit di sini )Tampilkan cuplikan kode
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>
sumber
@keyDown
jsfiddle.net/rLzm0f1q (namun saya tidak mengatakan itu@input
buruk atau baik)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/
sumber
Sekadar menambah jawaban yang benar di atas, di Vue.JS v1.0 Anda bisa menulis
<a v-on:click="doSomething">
Jadi dalam contoh ini akan menjadi
v-on:change="foo"
Lihat: http://v1.vuejs.org/guide/syntax.html#Arguments
sumber