diff --git a/packages/compiler-dom/__tests__/transforms/__snapshots__/vModel.spec.ts.snap b/packages/compiler-dom/__tests__/transforms/__snapshots__/vModel.spec.ts.snap index 5b610745e41..1953974c308 100644 --- a/packages/compiler-dom/__tests__/transforms/__snapshots__/vModel.spec.ts.snap +++ b/packages/compiler-dom/__tests__/transforms/__snapshots__/vModel.spec.ts.snap @@ -48,6 +48,22 @@ return function render(_ctx, _cache) { }" `; +exports[`compiler: transform v-model > input with v-bind shorthand type should use dynamic model 1`] = ` +"const _Vue = Vue + +return function render(_ctx, _cache) { + with (_ctx) { + const { vModelDynamic: _vModelDynamic, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue + + return _withDirectives((_openBlock(), _createElementBlock("input", { + "onUpdate:modelValue": $event => ((model) = $event) + }, null, 8 /* PROPS */, ["onUpdate:modelValue"])), [ + [_vModelDynamic, model] + ]) + } +}" +`; + exports[`compiler: transform v-model > modifiers > .lazy 1`] = ` "const _Vue = Vue diff --git a/packages/compiler-dom/__tests__/transforms/vModel.spec.ts b/packages/compiler-dom/__tests__/transforms/vModel.spec.ts index 02d188f01b9..64e102ff270 100644 --- a/packages/compiler-dom/__tests__/transforms/vModel.spec.ts +++ b/packages/compiler-dom/__tests__/transforms/vModel.spec.ts @@ -63,6 +63,13 @@ describe('compiler: transform v-model', () => { expect(generate(root).code).toMatchSnapshot() }) + test('input with v-bind shorthand type should use dynamic model', () => { + const root = transformWithModel('') + + expect(root.helpers).toContain(V_MODEL_DYNAMIC) + expect(generate(root).code).toMatchSnapshot() + }) + test('input w/ dynamic v-bind', () => { const root = transformWithModel('') diff --git a/packages/compiler-dom/src/transforms/vModel.ts b/packages/compiler-dom/src/transforms/vModel.ts index 5c28580b984..2e8b7228fc4 100644 --- a/packages/compiler-dom/src/transforms/vModel.ts +++ b/packages/compiler-dom/src/transforms/vModel.ts @@ -56,7 +56,7 @@ export const transformModel: DirectiveTransform = (dir, node, context) => { let directiveToUse = V_MODEL_TEXT let isInvalidType = false if (tag === 'input' || isCustomElement) { - const type = findProp(node, `type`) + const type = findProp(node, `type`, false, true) if (type) { if (type.type === NodeTypes.DIRECTIVE) { // :type="foo"