diff --git a/src/platforms/web/compiler/directives/model.js b/src/platforms/web/compiler/directives/model.js index 8f5951eac56..6100f2f909e 100644 --- a/src/platforms/web/compiler/directives/model.js +++ b/src/platforms/web/compiler/directives/model.js @@ -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*$/ let warn // in some cases, the event used has to be determined at runtime @@ -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( `:\n` + `v-model does not support dynamic input types. Use v-if branches instead.` diff --git a/test/unit/features/directives/model-dynamic.spec.js b/test/unit/features/directives/model-dynamic.spec.js index 87a4cb5cb55..7a53bc38669 100644 --- a/test/unit/features/directives/model-dynamic.spec.js +++ b/test/unit/features/directives/model-dynamic.spec.js @@ -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: `` + }).$mount() + expect(`v-model does not support dynamic input types`).not.toHaveBeenWarned() + }) it('should warn', function () { new Vue({ data: {