Я пытаюсь активировать foo()
функцию с помощью, @click
но, как видите, нужно дважды нажать переключатель, чтобы событие было правильно запущено. Только поймайте значение во второй раз, когда вы нажмете ...
Я хочу запустить событие, не вызывая @click
только событие при изменении v-model
(srStatus).
вот моя скрипка:
javascript
events
vue.js
jnieto
источник
источник
foo()
является внесение изменений, не связанных с шаблоном, используйтеwatcher
Ответы:
Это происходит потому, что ваш
click
обработчик срабатывает до изменения значения переключателя.change
Вместо этого вам нужно прослушать событие:<input type="radio" name="optionsRadios" id="optionsRadios2" value="" v-model="srStatus" v-on:change="foo"> //here
Кроме того, убедитесь, что вы действительно хотите вызвать
foo()
наготове ... похоже, что вы на самом деле не хотите этого делать.ready:function(){ foo(); },
источник
Фактически вы можете упростить это, удалив
v-on
директивы:<input type="radio" name="optionsRadios" id="optionsRadios1" value="1" v-model="srStatus">
И воспользуйтесь
watch
методом, чтобы прослушать изменение: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); } } } } });
источник
Vue2: если вы хотите обнаружить изменение только размытия ввода (например, после нажатия клавиши ввода или щелчка в другом месте), сделайте (подробнее здесь )
<input @change="foo" v-model... >
Если вы хотите обнаружить изменения одного символа (во время набора текста пользователем), используйте
<input @keydown="foo" v-model... >
Вы также можете использовать
@keyup
и@input
события. Если вы хотите передать дополнительные параметры, используйте в шаблоне, например@keyDown="foo($event, param1, param2)"
. Сравнение ниже (редактируемая версия здесь )Показать фрагмент кода
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>
источник
@keyDown
backspace работает с jsfiddle.net/rLzm0f1q (однако я не говорю, что@input
это плохо или хорошо)Вам следует использовать
@input
:<input @input="handleInput" />
@input
срабатывает, когда пользователь изменяет входное значение.@change
срабатывает, когда пользователь изменил значение и расфокусировал ввод (например, щелкнул где-то снаружи)Вы можете увидеть разницу здесь: https://jsfiddle.net/posva/oqe9e8pb/
источник
Чтобы добавить к правильному ответу выше, в Vue.JS v1.0 вы можете написать
<a v-on:click="doSomething">
Итак, в этом примере это будет
v-on:change="foo"
См. Http://v1.vuejs.org/guide/syntax.html#Arguments
источник