fix(v-model): generate separate modifiers for v-model with args

Author: yyx990803

packages/compiler-core/__tests__/transforms/__snapshots__/vModel.spec.ts.snap

@@ -76,7 +76,7 @@ export default function render() {
   const _ctx = this
   return (openBlock(), createBlock(\\"input\\", {
     [_ctx.value]: _ctx.model,
-    [\\"onUpdate:\\"+_ctx.value]: $event => (_ctx.model = $event)
+    [\\"onUpdate:\\" + _ctx.value]: $event => (_ctx.model = $event)
   }, null, 16 /* FULL_PROPS */))
 }"
 `;
@@ -90,7 +90,7 @@ return function render() {
     
     return (_openBlock(), _createBlock(\\"input\\", {
       [value]: model,
-      [\\"onUpdate:\\"+value]: $event => (model = $event)
+      [\\"onUpdate:\\" + value]: $event => (model = $event)
     }, null, 16 /* FULL_PROPS */))
   }
 }"

packages/compiler-core/__tests__/transforms/vModel.spec.ts

@@ -265,11 +265,7 @@ describe('compiler: transform v-model', () => {
     expect(props[1]).toMatchObject({
       key: {
         children: [
-          {
-            content: 'onUpdate:',
-            isStatic: true
-          },
-          '+',
+          '"onUpdate:" + ',
           {
             content: 'value',
             isStatic: false
@@ -313,11 +309,7 @@ describe('compiler: transform v-model', () => {
     expect(props[1]).toMatchObject({
       key: {
         children: [
-          {
-            content: 'onUpdate:',
-            isStatic: true
-          },
-          '+',
+          '"onUpdate:" + ',
           {
             content: '_ctx.value',
             isStatic: false
@@ -405,6 +397,37 @@ describe('compiler: transform v-model', () => {
     expect(args[4]).toBe(`["modelValue", "onUpdate:modelValue"]`)
   })
 
+  test('should generate modelModifers for component v-model with arguments', () => {
+    const root = parseWithVModel(
+      '<Comp v-model:foo.trim="foo" v-model:bar.number="bar" />',
+      {
+        prefixIdentifiers: true
+      }
+    )
+    const args = ((root.children[0] as ComponentNode)
+      .codegenNode as CallExpression).arguments
+    // props
+    expect(args[1]).toMatchObject({
+      properties: [
+        { key: { content: `foo` } },
+        { key: { content: `onUpdate:foo` } },
+        {
+          key: { content: 'fooModifiers' },
+          value: { content: `{ trim: true }`, isStatic: false }
+        },
+        { key: { content: `bar` } },
+        { key: { content: `onUpdate:bar` } },
+        {
+          key: { content: 'barModifiers' },
+          value: { content: `{ number: true }`, isStatic: false }
+        }
+      ]
+    })
+    // should NOT include modelModifiers in dynamicPropNames because it's never
+    // gonna change
+    expect(args[4]).toBe(`["foo", "onUpdate:foo", "bar", "onUpdate:bar"]`)
+  })
+
   describe('errors', () => {
     test('missing expression', () => {
       const onError = jest.fn()

packages/compiler-core/src/transforms/vModel.ts

@@ -43,13 +43,12 @@ export const transformModel: DirectiveTransform = (dir, node, context) => {
   const propName = arg ? arg : createSimpleExpression('modelValue', true)
   const eventName = arg
     ? arg.type === NodeTypes.SIMPLE_EXPRESSION && arg.isStatic
-      ? createSimpleExpression('onUpdate:' + arg.content, true)
+      ? `onUpdate:${arg.content}`
       : createCompoundExpression([
-          createSimpleExpression('onUpdate:', true),
-          '+',
+          '"onUpdate:" + ',
           ...(arg.type === NodeTypes.SIMPLE_EXPRESSION ? [arg] : arg.children)
         ])
-    : createSimpleExpression('onUpdate:modelValue', true)
+    : `onUpdate:modelValue`
 
   const props = [
     // modelValue: foo
@@ -80,9 +79,19 @@ export const transformModel: DirectiveTransform = (dir, node, context) => {
     const modifiers = dir.modifiers
       .map(m => (isSimpleIdentifier(m) ? m : JSON.stringify(m)) + `: true`)
       .join(`, `)
+    const modifiersKey = arg
+      ? arg.type === NodeTypes.SIMPLE_EXPRESSION && arg.isStatic
+        ? `${arg.content}Modifiers`
+        : createCompoundExpression([
+            ...(arg.type === NodeTypes.SIMPLE_EXPRESSION
+              ? [arg]
+              : arg.children),
+            ' + "Modifiers"'
+          ])
+      : `modelModifiers`
     props.push(
       createObjectProperty(
-        `modelModifiers`,
+        modifiersKey,
         createSimpleExpression(`{ ${modifiers} }`, false, dir.loc, true)
       )
     )