Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor($compile): Disable warn if v-model is used with ternary text-like types for input. #6227

Closed
wants to merge 1 commit into from
Closed

refactor($compile): Disable warn if v-model is used with ternary text-like types for input. #6227

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion src/platforms/web/compiler/directives/model.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import config from 'core/config'
import { addHandler, addProp, getBindingAttr } from 'compiler/helpers'
import { genComponentModel, genAssignmentCode } from 'compiler/directives/model'

const ternaryTextInputRE = /^[^?]{1,}\?\s*('|"|`)(?:text|number|password|search|email|tel|url)\1\s*:\s*('|"|`)(?:text|number|password|search|email|tel|url)\2\s*$/
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does a regexp like this introduce too much complexity that's not worth it?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't use makeMap be enough? Don't we want to check if dynamic type is one of those?

Copy link
Member

@posva posva Aug 11, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oh, you actually did that an #6344
we need the opposite 😆

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@posva, #6344 is about compiling itself while this PR is just to remove Warning in this specific scenario.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I meant for the makeMap function 😆

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh, yeah, we could use

/^[^?]{1,}\?\s*('|"|`)([a-z]*)\1\s*:\s*('|"|`)([a-z]*)\3\s*$/

and just checks [2] and [4] with makeMap. I'll add this changes to #6344 instead because isTextInputType is moved over there.

let warn

// in some cases, the event used has to be determined at runtime
Expand All @@ -24,7 +25,7 @@ export default function model (

if (process.env.NODE_ENV !== 'production') {
const dynamicType = el.attrsMap['v-bind:type'] || el.attrsMap[':type']
if (tag === 'input' && dynamicType) {
if (tag === 'input' && dynamicType && !ternaryTextInputRE.test(dynamicType)) {
warn(
`<input :type="${dynamicType}" v-model="${value}">:\n` +
`v-model does not support dynamic input types. Use v-if branches instead.`
Expand Down
10 changes: 10 additions & 0 deletions test/unit/features/directives/model-dynamic.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,16 @@
import Vue from 'vue'

describe('Directive v-model dynamic input type', () => {
it('should not warn if supported ternary', function () {
new Vue({
data: {
type: 'text',
text: 'hi'
},
template: `<input :type="type ? 'text' : 'password'" v-model="text">`
}).$mount()
expect(`v-model does not support dynamic input types`).not.toHaveBeenWarned()
})
it('should warn', function () {
new Vue({
data: {
Expand Down