Как запустить событие при изменении v-модели?

95

Я пытаюсь активировать foo()функцию с помощью, @clickно, как видите, нужно дважды нажать переключатель, чтобы событие было правильно запущено. Только поймайте значение во второй раз, когда вы нажмете ...

Я хочу запустить событие, не вызывая @clickтолько событие при изменении v-model(srStatus).

вот моя скрипка:

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

jnieto
источник
1
ссылка на скрипт больше не работает.
FrenkyB 03
Если целью вызова foo()является внесение изменений, не связанных с шаблоном, используйтеwatcher
Saksham,
Это отличный пример того, почему в вопросе требуется код . Если возможно, восстановите его и покажите здесь.
Ишервуд
Хотел бы я получить код вопроса, но это было уже 5 лет назад ... к счастью, у нас есть хорошие ответы
jnieto

Ответы:

79

Это происходит потому, что ваш clickобработчик срабатывает до изменения значения переключателя. changeВместо этого вам нужно прослушать событие:

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

Кроме того, убедитесь, что вы действительно хотите вызвать foo()наготове ... похоже, что вы на самом деле не хотите этого делать.

ready:function(){
    foo();
},
ферис
источник
Как бы вы справились со слайдерами?
Рой
где доступные события перечислены в документации. Не могу найти?
toraman
Это просто стандартные события JavaScript, которые вы можете найти здесь: developer.mozilla.org/en-US/docs/Web/Events#Standard_events
pherris
Благодарность! Но Ready: у меня не работала функция. Вместо этого методы: {foo () {// do something}}
Винс Бэнзон
Также обратите внимание, что если вы хотите зарегистрировать события «v-on: change» в настраиваемом компоненте vue (компонент с одним файлом), вместо этого следует использовать «v-on: input».
Andrés Biarge
99

Фактически вы можете упростить это, удалив 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);
                }
            }
        }
    }
});
Стивен Халлгрен
источник
2
Можете ли вы автоматически наблюдать за любой сменой модели? Например, для формы с несколькими входами, за которыми нужно следить?
Эрик Бурел,
@EricBurel Я знаю, что это старый, но ответ отрицательный. Вы не можете наблюдать за всем объектом данных, к которому привязаны все поля, вам нужно будет наблюдать за каждым свойством этого объекта индивидуально, что делает этот подход проблематичным для больших записей в формах с большим количеством полей.
JohnC
1
@EricBurel На самом деле вы можете смотреть вложенные объекты со свойством 'deep', установленным на 'true' -> vuejs.org/v2/api/#watch
SanBen
29

Vue2: если вы хотите обнаружить изменение только размытия ввода (например, после нажатия клавиши ввода или щелчка в другом месте), сделайте (подробнее здесь )

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

Если вы хотите обнаружить изменения одного символа (во время набора текста пользователем), используйте

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

Вы также можете использовать @keyupи @inputсобытия. Если вы хотите передать дополнительные параметры, используйте в шаблоне, например @keyDown="foo($event, param1, param2)". Сравнение ниже (редактируемая версия здесь )

Камил Келчевски
источник
keyDown не работает, чем нажата клавиша «backspace». Так что лучше использовать @input
Peretz30
В этой скрипке мы видим, что @keyDown backspace работает с jsfiddle.net/rLzm0f1q (однако я не говорю, что @inputэто плохо или хорошо)
Камил Келчевски
24

Вам следует использовать @input:

<input @input="handleInput" />

@input срабатывает, когда пользователь изменяет входное значение.

@change срабатывает, когда пользователь изменил значение и расфокусировал ввод (например, щелкнул где-то снаружи)

Вы можете увидеть разницу здесь: https://jsfiddle.net/posva/oqe9e8pb/

Перец30
источник
Что можно использовать вместо знака @? Есть ли какое-то правило об этом? Я спрашиваю об этом, потому что в моем сервере знак @ зарезервирован для чего-то еще.
FrenkyB 03
10

Чтобы добавить к правильному ответу выше, в Vue.JS v1.0 вы можете написать

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

Итак, в этом примере это будет

 v-on:change="foo"

См. Http://v1.vuejs.org/guide/syntax.html#Arguments

Мэтью
источник