fix: native component v-model with v-for

packages/uni-template-compiler/__tests__/compiler-extra.spec.js

@@ -21,22 +21,22 @@ describe('mp:compiler-extra', () => {
       '<view @touchmove="a.touchmove">{{t.a}}{{t[\'a\']}}{{t.a(b)}}{{t[\'a\'](b)}}{{u.t.a(b)}}{{u.t.a}}</view>',
       '<view bindtouchmove="{{a.touchmove}}">{{t.a+t[\'a\']+t.a(b)+t[\'a\'](b)+$root.g0+u.t.a}}</view>',
       'with(this){var g0=u.t.a(b);$mp.data=Object.assign({},{$root:{g0:g0}})}', {
-      filterModules: {
-        t: {},
-        a: {}
+        filterModules: {
+          t: {},
+          a: {}
+        }
       }
-    }
     )
     assertCodegen(
       /* eslint-disable no-template-curly-in-string */
       '<view v-for="(item, index) in a.test()" :key="index">{{item}}</view>',
       '<block wx:for="{{a.test()}}" wx:for-item="item" wx:for-index="index" wx:key="index"><view>{{item}}</view></block>',
       'with(this){}', {
-      filterModules: {
-        t: {},
-        a: {}
+        filterModules: {
+          t: {},
+          a: {}
+        }
       }
-    }
     )
   })
 
@@ -45,43 +45,43 @@ describe('mp:compiler-extra', () => {
       '<view></view>',
       '<view class="data-v-1"></view>',
       undefined, {
-      scopeId: 'data-v-1'
-    }
+        scopeId: 'data-v-1'
+      }
     )
     assertCodegen(
       '<view class="view"></view>',
       '<view class="view data-v-2"></view>',
       undefined, {
-      scopeId: 'data-v-2'
-    }
+        scopeId: 'data-v-2'
+      }
     )
     assertCodegen(
       '<view :class="[{ active: isActive }, errorClass]"></view>',
       '<view class="{{[\'data-v-3\',[(isActive)?\'active\':\'\'],errorClass]}}"></view>',
       undefined, {
-      scopeId: 'data-v-3'
-    }
+        scopeId: 'data-v-3'
+      }
     )
     assertCodegen(
       '<view class="static" :class="[{ active: isActive }, errorClass]"></view>',
       '<view class="{{[\'static\',\'data-v-4\',[(isActive)?\'active\':\'\'],errorClass]}}"></view>',
       undefined, {
-      scopeId: 'data-v-4'
-    }
+        scopeId: 'data-v-4'
+      }
     )
     assertCodegen(
       '<view ref="ref" :class="[{ active: isActive }, errorClass]"></view>',
       '<view data-ref="ref" class="{{[\'data-v-5\',\'vue-ref\',[(isActive)?\'active\':\'\'],errorClass]}}"></view>',
       undefined, {
-      scopeId: 'data-v-5'
-    }
+        scopeId: 'data-v-5'
+      }
     )
     assertCodegen(
       '<view :class="view"></view>',
       '<view class="{{[\'data-v-6\',view]}}"></view>',
       undefined, {
-      scopeId: 'data-v-6'
-    }
+        scopeId: 'data-v-6'
+      }
     )
     //     assertCodegen(
     //       '<view :class="view"></view>',
@@ -94,8 +94,8 @@ describe('mp:compiler-extra', () => {
       '<view :class="view" class="view"></view>',
       '<view class="{{[\'view\',\'data-v-7\',view]}}"></view>',
       undefined, {
-      scopeId: 'data-v-7'
-    }
+        scopeId: 'data-v-7'
+      }
     )
     //         assertCodegen(
     //             '<view :class="view" class="view"></view>',
@@ -124,8 +124,8 @@ describe('mp:compiler-extra', () => {
       '<view style="height:100rpx;width:100rpx;">text</view>',
       undefined,
       undefined, {
-      transformPx: true
-    }
+        transformPx: true
+      }
     )
   })
 
@@ -826,6 +826,16 @@ describe('mp:compiler-extra', () => {
       '<block wx:for="{{$root.l0}}" wx:for-item="item" wx:for-index="index"><view><view data-event-opts="{{[[\'tap\',[[\'e0\',[\'$event\']]]]]}}" data-event-params="{{({item:item.$orig})}}" bindtap="__e">{{item.m0}}</view></view></block>',
       'with(this){var l0=__map(array(),function(item,index){var $orig=__get_orig(item);var m0=get(item);return{$orig:$orig,m0:m0}});if(!_isMounted){e0=function($event,item){var _temp=arguments[arguments.length-1].currentTarget.dataset,_temp2=_temp.eventParams||_temp["event-params"],item=_temp2.item;var _temp,_temp2;return test(item)}}$mp.data=Object.assign({},{$root:{l0:l0}})}'
     )
+    assertCodegen(
+      '<template v-for="item in [1,2]"><input v-model="values[item]" /></template>',
+      '<block wx:for="{{[1,2]}}" wx:for-item="item" wx:for-index="__i0__"><input data-event-opts="{{[[\'input\',[[\'e0\',[\'$event\']]]]]}}" data-event-params="{{({item})}}" value="{{values[item]}}" bindinput="__e"/></block>',
+      'with(this){if(!_isMounted){e0=function($event,item){var _temp=arguments[arguments.length-1].currentTarget.dataset,_temp2=_temp.eventParams||_temp["event-params"],item=_temp2.item;var _temp,_temp2;$event=$event.target.value;return __set_model(values,item,$event,[])}}}'
+    )
+    assertCodegen(
+      '<template v-for="item in [1,2]"><custom-input v-model="values[item]" /></template>',
+      '<block wx:for="{{[1,2]}}" wx:for-item="item" wx:for-index="__i0__"><custom-input bind:input="__e" vue-id="{{\'551070e6-1-\'+__i0__}}" value="{{values[item]}}" data-event-opts="{{[[\'^input\',[[\'e0\']]]]}}" data-event-params="{{({item})}}" bind:__l="__l"></custom-input></block>',
+      'with(this){if(!_isMounted){e0=function($event,item){var _temp=arguments[arguments.length-1].currentTarget.dataset,_temp2=_temp.eventParams||_temp["event-params"],item=_temp2.item;var _temp,_temp2;return __set_model(values,item,$event,[])}}}'
+    )
   })
   it('generate bool attr', () => {
     assertCodegen(

packages/uni-template-compiler/lib/script/traverse/data/event.js

 const t = require('@babel/types')
-const parser = require('@babel/parser')
+const template = require('@babel/template').default
 
 const {
   IDENTIFIER_EVENT,
@@ -7,7 +7,8 @@ const {
   INTERNAL_EVENT_PROXY,
   ATTR_DATA_EVENT_OPTS,
   ATTR_DATA_EVENT_PARAMS,
-  INTERNAL_SET_SYNC
+  INTERNAL_SET_SYNC,
+  INTERNAL_SET_MODEL
 } = require('../../../constants')
 
 const {
@@ -387,6 +388,13 @@ function parseEvent (keyPath, valuePath, state, isComponent, isNativeOn = false,
             funcPath.node.params.push(t.identifier(name))
           })
           if (params.length) {
+            if (!isCustom) {
+              const bodyStatements = funcPath.get('body.body')
+              const returnStatement = bodyStatements[0]
+              if (t.isReturnStatement(returnStatement) && t.isCallExpression(returnStatement.node.argument) && returnStatement.node.argument.callee.name === INTERNAL_SET_MODEL) {
+                funcPath.node.body.body.unshift(template('$event=$event.target.value')())
+              }
+            }
             let argumentsName = 'arguments'
             if (funcPath.isArrowFunctionExpression()) {
               argumentsName = 'args'
@@ -396,7 +404,7 @@ function parseEvent (keyPath, valuePath, state, isComponent, isNativeOn = false,
             const paramsUid = funcPath.scope.generateDeclaredUidIdentifier().name
             const dataset = ATTR_DATA_EVENT_PARAMS.substring(5)
             const code = `var ${datasetUid}=${argumentsName}[${argumentsName}.length-1].currentTarget.dataset,${paramsUid}=${datasetUid}.${dataset.replace(/-([a-z])/, (_, str) => str.toUpperCase())}||${datasetUid}['${dataset}'],${params.map(item => `${item}=${paramsUid}.${item}`).join(',')}`
-            funcPath.node.body.body.unshift(parser.parse(code).program.body[0])
+            funcPath.node.body.body.unshift(template(code)())
           }
           methods.push(addEventExpressionStatement(funcPath, state, isComponent, isNativeOn))
         }

packages/uni-template-compiler/lib/script/traverse/data/model.js

@@ -7,13 +7,14 @@ const {
 module.exports = function processRef (paths, path, state) {
   const modelPath = paths.model
   if (modelPath) {
-    const callbackProperty = modelPath.node.value.properties.find(property => {
+    const properties = modelPath.node.value.properties
+    const [callbackProperty] = properties.splice(properties.findIndex(property => {
       return property.key.name === 'callback'
-    })
-    const valueProperty = modelPath.node.value.properties.find(
+    }), 1)
+    const valueProperty = properties.find(
       property => property.key.name === 'value'
     )
-    const exprProperty = modelPath.node.value.properties.find(
+    const exprProperty = properties.find(
       property => property.key.name === 'expression'
     )
 

packages/uni-template-compiler/lib/script/traverse/visitor.js

@@ -230,6 +230,8 @@ module.exports = {
                 path =>
                   path.isObjectProperty() && ['on', 'nativeOn'].includes(path.node.key.name)
               )
+              // path is model.callback
+              // || path.findParent(path => path.isObjectProperty() && path.node.key.name === 'callback' && t.isFunctionExpression(path.node.value) && t.isObjectProperty(path.parentPath.parentPath) && path.parentPath.parentPath.node.key.name === 'model')
             ) {
               // event
               return path.skip()