diff --git a/packages/compiler-core/__tests__/transforms/vModel.spec.ts b/packages/compiler-core/__tests__/transforms/vModel.spec.ts index 1fde627ac..2efd895a6 100644 --- a/packages/compiler-core/__tests__/transforms/vModel.spec.ts +++ b/packages/compiler-core/__tests__/transforms/vModel.spec.ts @@ -371,6 +371,27 @@ describe('compiler: transform v-model', () => { expect(codegen.arguments[4]).toBe(`["modelValue", "onUpdate:modelValue"]`) }) + test('should generate modelModifers for component v-model', () => { + const root = parseWithVModel('', { + prefixIdentifiers: true + }) + const args = (root.children[0] as ComponentNode).codegenNode!.arguments + // props + expect(args[1]).toMatchObject({ + properties: [ + { key: { content: `modelValue` } }, + { key: { content: `onUpdate:modelValue` } }, + { + key: { content: 'modelModifiers' }, + value: { content: `{ trim: true, "bar-baz": true }`, isStatic: false } + } + ] + }) + // should NOT include modelModifiers in dynamicPropNames because it's never + // gonna change + expect(args[4]).toBe(`["modelValue"]`) + }) + describe('errors', () => { test('missing expression', () => { const onError = jest.fn() diff --git a/packages/compiler-core/src/transforms/vModel.ts b/packages/compiler-core/src/transforms/vModel.ts index b4e35c2cd..dd462cf92 100644 --- a/packages/compiler-core/src/transforms/vModel.ts +++ b/packages/compiler-core/src/transforms/vModel.ts @@ -6,7 +6,8 @@ import { NodeTypes, Property, CompoundExpressionNode, - createInterpolation + createInterpolation, + ElementTypes } from '../ast' import { createCompilerError, ErrorCodes } from '../errors' import { isMemberExpression, isSimpleIdentifier } from '../utils' @@ -64,7 +65,9 @@ export const transformModel: DirectiveTransform = (dir, node, context) => { } const props = [ + // modelValue: foo createObjectProperty(propName, dir.exp!), + // "onUpdate:modelValue": $event => (foo = $event) createObjectProperty( eventName, createCompoundExpression([ @@ -75,8 +78,17 @@ export const transformModel: DirectiveTransform = (dir, node, context) => { ) ] - if (dir.modifiers.length) { - // TODO add modelModifiers prop + // modelModifiers: { foo: true, "bar-baz": true } + if (dir.modifiers.length && node.tagType === ElementTypes.COMPONENT) { + const modifiers = dir.modifiers + .map(m => (isSimpleIdentifier(m) ? m : JSON.stringify(m)) + `: true`) + .join(`, `) + props.push( + createObjectProperty( + `modelModifiers`, + createSimpleExpression(`{ ${modifiers} }`, false, dir.loc, true) + ) + ) } return createTransformProps(props)