Vue: Флажок показывает отмеченный, когда v-модель ложна

Созданный на 8 апр. 2016 · 3Комментарии · Источник: vuejs/vue

Я пошел по этому пути, потому что @click сработал до обновления v-модели (пример здесь: http://jsfiddle.net/5sH6A/308/)
поэтому я не знал, что такое значение. Я подумал, что попробую свою логику в функции watch:, но нашел проблему ниже.

Версия Vue.js

1.0.16

Ссылка на воспроизведение

http://jsfiddle.net/5sH6A/303/

Действия по воспроизведению

Установите флажок и выберите «Отмена».

Что ожидается?

Флажок должен быть пустым

Что происходит на самом деле?

Флажок показывает отмеченный, в то время как связанные данные являются ложными

Источник

loki0609

Самый полезный комментарий

Очень поздно для этой вечеринки, но все еще актуальной для меня после всех этих лет. Мое решение:
При использовании ввода флажка с v-моделью используйте обработчик onchange @change . Будет работать как для IE, так и для разумных браузеров.

Как ни странно, если вы используете флажок v-model и @click , значение вашего атрибута v-model (например, «flgChecked») будет изменено на противоположное в обработчике кликов Chrome/Firefox. Другими словами, это будет ложью, когда вы только что установили флажок в положение «включено», и значением «истина», когда вы щелкнули его в положение «выключено». Так что -- наоборот. Но на самом деле IE сообщает «правильно». Так . . . используйте @change.

Или, может быть, я просто что-то упускаю.

jomofrodo 19 сент. 2019

❤3

Все 3 Комментарий

Это похоже на совместимость.
Он неплохо работает с Edge 12 и IE11 в Windows 10, но не работает с chrome 49.0.2623.110.
Он также ломается с Firefox 41 при открытии suse jump.

Twiknight 8 апр. 2016

Установка одного и того же значения внутри наблюдателя - всегда плохая идея...

Я бы сказал, что самый простой способ справиться с этим — просто не использовать v-model . Вы все равно пытаетесь контролировать значение самостоятельно: http://jsfiddle.net/yyx990803/5sH6A/310/