V model vue не работает

Работа с формами

Типичное использование

Можно использовать директиву v-model для двунаправленного связывания данных с элементами форм input, textarea и select. Способ обновления элемента выбирается автоматически в зависимости от типа элемента. Хотя v-model и выглядит как нечто волшебное, в действительности это лишь синтаксический сахар для обновления данных в элементах ввода, с некоторыми поправками для исключительных случаев.

v-model игнорирует начальное значение атрибутов value , checked или selected на любых элементах форм. Данные экземпляра Vue всегда считаются источником истины. Начальное значение необходимо объявить на стороне JavaScript, внутри опции data компонента.

Внутренне v-model использует разные свойства и генерирует разные события для различных элементов ввода:

• элементы для ввода текста и многострочного текста используют свойство value и событие input ;
• чекбоксы и радиокнопки используют свойство checked и событие change ;
• выпадающие списки используют свойство value и событие change .

В языках, требующих IME (китайский, японский, корейский и т.д.), можно заметить, что v-model не обновляется по мере IME-композиции. Если вы хотите обрабатывать и эти обновления, используйте события input .

Текст

Многострочный текст

Интерполяция внутри textarea ( ) не будет работать. Используйте вместо неё директиву v-model

Чекбоксы

Один чекбокс, привязанный к булевому значению:

Список чекбоксов, привязанных к одному массиву:

Радиокнопки

Выпадающие списки

Выбор одного варианта из списка:

Если начальное значение выражения v-model не соответствует ни одному из вариантов списка, элемент
Выбрано: << selected >>

Динамическое отображение списка опций с помощью v-for :

Связывание значений

Для радиокнопок и выпадающих списков в качестве v-model обычно используются статические строки, а для чекбоксов — булевые значения:

Иногда необходимо связать значение с динамическим свойством экземпляра Vue. Для этого можно использовать v-bind . Кроме того, использование v-bind позволяет связывать поле ввода с нестроковыми значениями.

Чекбокс

Атрибуты true-value и false-value не влияют на атрибут value тега input, потому что браузеры пропускают невыбранные чекбоксы при отправке форм. Чтобы гарантированно отправлять одно из двух значений с формой (например, «да» или «нет») используйте радиокнопки.

Радиокнопки

Списки выбора

Модификаторы

По умолчанию v-model синхронизирует ввод с данными по событию input (за исключением вышеупомянутых событий IME). Можно указать модификатор lazy , чтобы использовать для синхронизации после события change :

.number

Для автоматического приведения введённого пользователем к Number, добавьте модификатор number :

Зачастую это полезно, потому что даже при указанном атрибуте type=»number» значением поля ввода всегда будет строка. Если значение не удаётся распарсить с помощью parseFloat() , то возвращается оригинальное значение.

Если необходимо, чтобы автоматически обрезались пробелы в начале и в конце строки, используйте модификатор trim для полей ввода, обрабатываемых через v-model :

Использование v-model с компонентами

Если вы ещё не знакомы с компонентами Vue, пока просто пропустите эту секцию

Встроенных в HTML элементов ввода не всегда достаточно. К счастью, компоненты Vue позволяют создавать собственные аналоги с полностью настраиваемым поведением. Эти элементы тоже могут работать с директивой v-model !

Источник

v-model does not sync when browser autocompletes #5248

Comments

ElMatella commented Mar 21, 2017 •

Version

Reproduction link

Steps to reproduce

• Go to Chrome Mobile
• Begin to tap an email
• Choose an email from Chrome list
• See that v-model did not work

Here some screenshots of the problem:

What is expected?

v-model is supposed to be updated on autoupdate

What is actually happening?

the model is not updated

The text was updated successfully, but these errors were encountered:

znck commented Mar 21, 2017

Can’t reproduce. Not much can be done without repro.

posva commented Mar 21, 2017

The repro is fine, you need to have used the phone with email inputs already. I tested on Androi 6 and it works just fine. Unfortunately I don’t have an iPhone

znck commented Mar 21, 2017

Tested on iPad safari & chrome. Working as expected.

ElMatella commented Mar 21, 2017

I updated the reproduction on a self hosted server, so you can access it through https://martar.fr/demo-vue.html

Safari does not seem to reproduce the problem, however, Chrome IOS does it all the time with this code.

I am using Google Chrome 57.0.2987.100 on an Iphone 5 10.2.1

znck commented Mar 21, 2017

@vuejs/collaborators can anyone confirm this?

franciscolourenco commented Mar 24, 2017

@ElMatella It works fine in Safari. Not been using Chrome so don’t have a saved email. Can you provide a submittable form, so the email gets saved by Chrome?

ElMatella commented Mar 24, 2017

I updated the form, so you can submit it https://martar.fr/demo-vue.html

franciscolourenco commented Mar 24, 2017

I can reproduce on iOS 10.2.1, Chrome 57.0.2987.100

posva commented Mar 25, 2017

@ElMatella I recommend you to open the issue on the chrome issue tracker anyway. It’s probably an issue with the iOS chrome version not firing the input/change event when autocompleting from keyboard suggestions

ElMatella commented Mar 26, 2017

Hi @posva thank you for the advice, I went to the chrome issue tracker (the chromium one, I don’t even know if this is what I should look for), but I admit that I don’t feel very confident with their system, I’m not a huge actor on community devs. But I wonder, if the issue appears on a «stable version» of chrome, should’nt be Vue that should adapt?

Again, I am not used to this. And I am not familiar with Vue core, where are defined the events to listen on inputs changes?

ElMatella commented Mar 26, 2017

Ok, I updated the snippet I created with this:

The v-model is only listening for the input event. However, the IOS chrome autocomplete behaviour triggers the change event. So could we not update the data on the change event also?

posva commented Mar 26, 2017

No, because stable versions do have bugs 😄
Yes, it’s there where the error should be reported. I personally cannot reproduce it because I don’t own an iPhone, and I do not get any autocomplete option in the emulator. To go further you could check if the input emits the change or input event (this can be done with vanilla js) when autocompleting and check if the behaviour is different from ios chrome to a desktop chrome. If it is, then you should report the bug in the chromium issue tracker https://bugs.chromium.org/p/chromium/issues/list

ElMatella commented Mar 26, 2017

In the meantime, I am going to manually listen on the change event to update model. I keep you informed of Chrome team responses, thank you 🙂

posva commented Mar 26, 2017

I didn’t see the comment above before commenting (it didn’t sync). Listening for change and input will have a perf impact when dealing with many v-model with inputs, so I wonder if it’s good to listen for both. On the other hand, it should work. Maybe a check for iOS Chrome can prevent that

ElMatella commented Mar 26, 2017

Yes, it would have an impact on perf, however, the change event is not triggered as much as the input event, only once when user unfocus the input.

posva commented Mar 26, 2017 •

It’s not because of twice the amount of triggers, adding more event listeners do have an extra cost too

blephy commented Nov 13, 2017 •

I don’t know if i’m alone in that case, but this issue is still happening on Safari 11.0

• Autofill is running fine on Safari 11.0 (when you click on the little guy in an input and you select in the list which one)
• But autocomplete after a first passed form submit don’t work on Safari 11.0 (when you start tipping, and you immediately click on the list)

The issue is the component is not updated properly and data transmit are not updated. Exemple:

1. You write ‘OKBOYS’ on first time and you submit, the form must be valid to be cached by Safari.
2. Reload the page by the browser ( CMD + R ).
3. You start writting ‘OK’ for the second time, Safari offers you to select ‘OKBOYS’ in the list bellow the input. You select it. The graphical input value is ‘OKBOYS’ but the real value transmitted is still only what you tipped ‘OK’.

autocomplete=»nope» or autocomplete=»off» (cf here) don’t change anything. Safari seams to ignore this html attribute and offers autocompletion; not other Web Browser (Edge, Chrome, FF).

EDIT: autocomplete=»off» works in fact. The way i was still getting an error was caused by Safari form cache (i juste erase form autofill cache in Safari preferences). So autocomplete=»off» is just a bypass to this issue, but the issue still present for me.

Источник

Пользовательские события

Подразумевается, что вы уже изучили и разобрались с разделом Основы компонентов. Если нет — прочитайте его сначала.

Стиль именования событий

В отличие от компонентов и входных параметров, имена событий не предоставляют никакой автоматической трансформации стиля именования события. Вместо этого, имя генерируемого события должно точно соответствовать имени, используемому при прослушивании события. К примеру, если генерируем событие с именем в camelCase:

Прослушивание kebab-cased версии этого имени не будет иметь никакого эффекта:

В отличие от компонентов и входных параметров, имена событий никогда не будут использоваться в качестве имён переменных или имён свойств в JavaScript, поэтому нет причин использовать camelCase или PascalCase. Кроме того, директивы прослушивания событий v-on внутри DOM-шаблонов автоматически преобразуются в нижний регистр (из-за нечувствительности HTML к регистру), поэтому v-on:myEvent станет v-on:myevent — что делает прослушивание события myEvent невозможным.

По этим причинам мы рекомендуем всегда использовать kebab-case для имён событий.

Настройка v-model у компонента

По умолчанию v-model на компоненте использует входной параметр value и событие input . Но некоторые типы полей, такие как чекбоксы или радиокнопки, могут использовать атрибут value для других целей. Использование опции model позволит избежать конфликта в таких случаях:

Теперь, когда используем v-model на этом компоненте:

значение lovingVue будет передано во входном параметре checked . А обновляться свойство lovingVue будет когда сгенерирует событие change с новым значением.

Обратите внимание, что вам всё равно нужно объявлять входной параметр checked в опции props компонента.

Подписка на нативные события в компонентах

Иногда нужно подписаться на нативные события браузера на корневом элементе компонента. В таких случаях можно применять модификатор .native для v-on :

Иногда это может быть полезно, но это не очень хорошая идея, когда вы пытаетесь прослушивать очень специфичный элемент, к примеру . Например, компонент можно переделать так, чтобы корневой элемент был фактически элементом :

В этом случае слушатель .native в родителе просто тихо перестанет работать. Ошибок не будет, но обработчик onFocus не будет вызываться, когда мы этого ожидаем.

Для решения этой проблемы Vue предоставляет свойство $listeners , содержащее объект всех слушателей, которые используются на компоненте. Например:

Используя свойство $listeners , вы можете передать все слушатели событий на компоненте на определённый дочерний элемент с помощью v-on=»$listeners» . Для таких элементов как , вы также можете захотеть работоспособности с v-model , для чего бывает полезно создать новое вычисляемое свойство для слушателей, например inputListeners указанный ниже:

Теперь компонент стал полностью прозрачной обёрткой, что означает, что его можно использовать точно также, как и обычный элемент : все те же атрибуты и слушатели будут работать без указания модификатора .native .

Модификатор .sync

В некоторых случаях нам может понадобиться «двусторонняя привязка» для входных параметров. К сожалению, настоящая двусторонняя привязка может создавать проблемы с поддержкой, поскольку дочерние компоненты смогут мутировать состояние родителя без источника, который является очевидным как у родителя, так и у потомков.

Поэтому вместо этого, мы рекомендуем генерировать события с определённым шаблоном имени update:myPropName . Например, в гипотетическом компоненте с входным параметром title , мы можем сообщить о намерении присвоить новое значение:

Затем, родитель может прослушать это событие и обновить локальное свойство, если захочет. Например:

Для удобства мы предлагаем краткую запись для этого шаблона с помощью модификатора .sync :

Обратите внимание, что v-bind с модификатором .sync не работает с выражениями (например, v-bind:title.sync=”doc.title + ‘!’” не будет работать). Вместо этого нужно указывать только имя свойства, которое хотите привязать, аналогично v-model .

Модификатор .sync также может использоваться вместе с v-bind при использовании объектной записи, чтобы сразу устанавливать значения нескольких входных параметров:

Это передаёт каждое свойство в объекте doc (например, title ) в качестве индивидуальных входных параметров, а затем добавляет слушатели событий v-on для каждого из них.

Источник

# Изменения в работе v-model

# Обзор

Краткий обзор что изменилось:

• КАРДИНАЛЬНОЕ ИЗМЕНЕНИЕ: При использовании на компонентах v-model поменялись входной параметр и имя события:
  • входной параметр: value -> modelValue ;
  • событие: input -> update:modelValue ;
• КАРДИНАЛЬНОЕ ИЗМЕНЕНИЕ: Модификатор .sync для v-bind и опция компонента model были удалены и заменяются возможностью указать аргумент v-model ;
• НОВОЕ: Теперь возможны несколько привязок v-model на одном компоненте;
• НОВОЕ: Добавлена возможность создавать собственные модификаторы для v-model .

Для получения дополнительной информации читайте дальше!

# Введение

Во Vue 2.0 директива v-model требовала, чтобы использовался входной параметр value . Для управления ещё другим входным параметром приходилось использовать v-bind.sync . Кроме того, жёстко прописанная связь между v-model и value приводила к проблемам при обработке нативных и пользовательских элементов.

В версии 2.2 была добавлена опция компонента model , которая позволила настраивать входной параметр и событие, используемые для v-model . Но использовать можно было всё равно только одну v-model на компоненте.

Во Vue 3 было унифицировано API для двусторонней привязки данных, чтобы уменьшить путаницу и предоставить разработчикам больше гибкости в работе с директивой v-model .

# Синтаксис в 2.x

В версии 2.x использование v-model на компоненте эквивалентно передаче входного параметра value и отслеживании сгенерированного события input :

Если хочется изменить используемый входной параметр или имя события на другие, можно воспользоваться опцией model в компоненте ChildComponent :

В этом случае v-model будет сокращённым вариантом для

# Использование v-bind.sync

В некоторых случаях может потребоваться «двусторонняя привязка» к входному параметру (иногда в дополнение к существующей v-model для другого). Для этого рекомендуется генерировать событие по шаблону update:myPropName . Например, для ChildComponent из предыдущего примера с входным параметром title можно передавать намерение о присвоении нового значения следующий образом:

Тогда родительский компонент может прослушать это событие и обновить локальное свойство, если захочет. Например:

Для удобства, сокращённый вариант для этого шаблона с модификатором .sync такой:

# Синтаксис в 3.x

В версии 3.x v-model на пользовательском компоненте эквивалентно передаче входного параметра modelValue и отслеживании сгенерированного события update:modelValue :

# Аргументы v-model

Чтобы изменить имя свойства, вместо использования опции model в компоненте, теперь можно передавать аргумент в директиву v-model :

Это также служит заменой модификатору .sync и позволяет указать несколько v-model на пользовательском компоненте.

# Модификаторы v-model

Кроме жёстко заданных модификаторов v-model в версии 2.x, таких как .trim , в версии 3.x теперь поддерживается создание пользовательских модификаторов:

Подробнее о пользовательских модификаторах v-model можно прочитать в разделе пользовательских событий.

# Стратегия миграции

проверить кодовую базу на использование .sync и заменить их на v-model :

для всех v-model без аргументов убедитесь, что изменили входной параметр и имя события на modelValue и update:modelValue соответственно

Источник