fix(mp-weixin): 修复 v-for 下带 key 时,组件同时使用v-model、input事件时编译结果不正确 （question/204429）

Author: fxy060608

packages/uni-cli-shared/src/vue/utils.ts

@@ -102,7 +102,10 @@ export function createDirectiveNode(
   }
 }
 
-export function createOnDirectiveNode(name: string, value: string) {
+export function createOnDirectiveNode(
+  name: string,
+  value: string | ExpressionNode
+) {
   return createDirectiveNode('on', name, value)
 }
 

packages/uni-mp-compiler/__tests__/vModel.spec.ts

@@ -1,4 +1,5 @@
-import { assert } from './testUtils'
+import { BindingTypes } from '@vue/compiler-core'
+import { assert, miniProgram } from './testUtils'
 
 describe('compiler: transform v-model', () => {
   test(`component v-model`, () => {
@@ -107,4 +108,27 @@ describe('compiler: transform v-model', () => {
 }`
     )
   })
+  test(`input v-model + v-for`, () => {
+    assert(
+      `<view v-for="(item,index) in props" :key="index"><input v-model="formData[item]" @input="change" /></view>`,
+      `<view wx:for="{{a}}" wx:for-item="item" wx:key="c"><input bindinput="{{item.a}}" value="{{item.b}}"/></view>`,
+      `(_ctx, _cache) => {
+  return { a: _f(props, (item, index, i0) => { return { a: _o([$event => formData[item] = $event.detail.value, change], index), b: formData[item], c: index }; }) }
+}`,
+      {
+        inline: true,
+        bindingMetadata: {
+          formData: BindingTypes.SETUP_CONST,
+          change: BindingTypes.SETUP_CONST,
+          props: BindingTypes.LITERAL_CONST,
+        },
+        miniProgram: {
+          ...miniProgram,
+          event: {
+            key: true,
+          },
+        },
+      }
+    )
+  })
 })

packages/uni-mp-compiler/src/transforms/vModel.ts

@@ -233,6 +233,11 @@ function findDatasetEventOpts(node: ElementNode) {
 }
 
 function parseVOn(exp: ExpressionNode, context: TransformContext) {
+  // @ts-expect-error
+  const rawVOnExpr = exp.__withoutKeysVOnExpr
+  if (rawVOnExpr) {
+    exp = rawVOnExpr
+  }
   return genExpr(exp).slice(context.helperString(V_ON).length + 1, -1)
 }
 
@@ -313,19 +318,24 @@ function transformVModel(
       : onUpdateExpr
   ) as ExpressionNode
 
+  let vOnExpr: ExpressionNode | string = wrapperVOn(
+    modifiers
+      ? wrapperVModelModifiers(vOnValue, modifiers, context, isComponent)
+      : vOnValue,
+    node,
+    context
+  )
+  // @ts-expect-error
+  const rawVOnExpr = vOnExpr.__withoutKeysVOnExpr
+  vOnExpr = formatEventCode(genExpr(vOnExpr))
+  if (rawVOnExpr) {
+    vOnExpr = createSimpleExpression(vOnExpr, false)
+    // @ts-expect-error
+    vOnExpr.__withoutKeysVOnExpr = formatEventCode(genExpr(rawVOnExpr))
+  }
   const vOnUpdate = createOnDirectiveNode(
     event || camelize(onUpdateArg.content.replace('onUpdate:', 'update-')),
-    formatEventCode(
-      genExpr(
-        wrapperVOn(
-          modifiers
-            ? wrapperVModelModifiers(vOnValue, modifiers, context, isComponent)
-            : vOnValue,
-          node,
-          context
-        )
-      )
-    )
+    vOnExpr
   )
   return [vBindModelValue, vOnUpdate]
 }

packages/uni-mp-compiler/src/transforms/vOn.ts

@@ -229,10 +229,20 @@ export function wrapperVOn(
       }
     }
   }
-  return createCompoundExpression([
+  const newExpr = createCompoundExpression([
     `${context.helperString(V_ON)}(`,
     value,
     ...keys,
     `)`,
   ])
+  // 严格限制生效范围，仅当有keys时，才保存原始事件表达式
+  if (keys.length) {
+    // @ts-expect-error 内部 parseVOn 时使用
+    newExpr.__withoutKeysVOnExpr = createCompoundExpression([
+      `${context.helperString(V_ON)}(`,
+      value,
+      `)`,
+    ])
+  }
+  return newExpr
 }