fix(mp): computed property in v-for

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

@@ -251,10 +251,10 @@ describe('mp:compiler-extra', () => {
     )
   })
 
-  it('generate events inside v-for', () => {
-    assertCodegen(
-      '<view v-for="item in dataList" :key="item.id" @click="click1(item, 1);click2(item, 2);"/>',
-      '<block wx:for="{{dataList}}" wx:for-item="item" wx:for-index="__i0__" wx:key="id"><view data-event-opts="{{[[\'tap\',[[\'click1\',[\'$0\',1],[[[\'dataList\',\'id\',item.id]]]],[\'click2\',[\'$0\',2],[[[\'dataList\',\'id\',item.id]]]]]]]}}" bindtap="__e"></view></block>'
+  it('generate events inside v-for', () => {
+    assertCodegen(
+      '<view v-for="item in dataList" :key="item.id" @click="click1(item, 1);click2(item, 2);"/>',
+      '<block wx:for="{{dataList}}" wx:for-item="item" wx:for-index="__i0__" wx:key="id"><view data-event-opts="{{[[\'tap\',[[\'click1\',[\'$0\',1],[[[\'dataList\',\'id\',item.id]]]],[\'click2\',[\'$0\',2],[[[\'dataList\',\'id\',item.id]]]]]]]}}" bindtap="__e"></view></block>'
     )
     // TODO vue的数字 item 是从1，小程序是从0，后续考虑抹平差异
     assertCodegen(
@@ -310,23 +310,23 @@ describe('mp:compiler-extra', () => {
     assertCodegen(
       '<view class="input-list" v-for="(item,index) in dataList" :key="item.id"><input v-model.trim="dataList2[index].val" /></view>',
       '<block wx:for="{{dataList}}" wx:for-item="item" wx:for-index="index" wx:key="id"><view class="input-list"><input data-event-opts="{{[[\'input\',[[\'__set_model\',[\'$0\',\'val\',\'$event\',[\'trim\']],[\'dataList2.\'+index+\'\']]]],[\'blur\',[[\'$forceUpdate\']]]]}}" value="{{dataList2[index].val}}" bindinput="__e" bindblur="__e"/></view></block>'
-    )
-    assertCodegen(
-      ` <view>
-        <view v-for="item in list[idx]" :key="item.id" class="mid-item-title" @click="m1(item)">
-          <view class="mid-item-icon" @click.stop="m2(item)"></view>
-        </view>
-        </view>`,
-      '<view><block wx:for="{{list[idx]}}" wx:for-item="item" wx:for-index="__i0__" wx:key="id"><view data-event-opts="{{[[\'tap\',[[\'m1\',[\'$0\'],[[[\'list.\'+idx+\'\',\'id\',item.id]]]]]]]}}" class="mid-item-title" bindtap="__e"><view data-event-opts="{{[[\'tap\',[[\'m2\',[\'$0\'],[[[\'list.\'+idx+\'\',\'id\',item.id]]]]]]]}}" class="mid-item-icon" catchtap="__e"></view></view></block></view>'
-    )
-    assertCodegen(
-      '<view><view class="item" v-for="i in \'abc\'" :key="i" @click="func(i)"></view></view>',
-      '<view><block wx:for="abc" wx:for-item="i" wx:for-index="__i0__" wx:key="*this"><view data-event-opts="{{[[\'tap\',[[\'func\',[\'$0\'],[[[\'#s#abc\',\'\',__i0__]]]]]]]}}" class="item" bindtap="__e"></view></block></view>'
-    )
-    assertCodegen(
-      '<view><view class="item" v-for="i in 5" :key="i" @click="func(i)"></view></view>',
-      '<view><block wx:for="{{5}}" wx:for-item="i" wx:for-index="__i0__" wx:key="*this"><view data-event-opts="{{[[\'tap\',[[\'func\',[\'$0\'],[[[5,\'\',__i0__]]]]]]]}}" class="item" bindtap="__e"></view></block></view>'
-    )
+    )
+    assertCodegen(
+      ` <view>
+        <view v-for="item in list[idx]" :key="item.id" class="mid-item-title" @click="m1(item)">
+          <view class="mid-item-icon" @click.stop="m2(item)"></view>
+        </view>
+        </view>`,
+      '<view><block wx:for="{{list[idx]}}" wx:for-item="item" wx:for-index="__i0__" wx:key="id"><view data-event-opts="{{[[\'tap\',[[\'m1\',[\'$0\'],[[[\'list.\'+idx+\'\',\'id\',item.id]]]]]]]}}" class="mid-item-title" bindtap="__e"><view data-event-opts="{{[[\'tap\',[[\'m2\',[\'$0\'],[[[\'list.\'+idx+\'\',\'id\',item.id]]]]]]]}}" class="mid-item-icon" catchtap="__e"></view></view></block></view>'
+    )
+    assertCodegen(
+      '<view><view class="item" v-for="i in \'abc\'" :key="i" @click="func(i)"></view></view>',
+      '<view><block wx:for="abc" wx:for-item="i" wx:for-index="__i0__" wx:key="*this"><view data-event-opts="{{[[\'tap\',[[\'func\',[\'$0\'],[[[\'#s#abc\',\'\',__i0__]]]]]]]}}" class="item" bindtap="__e"></view></block></view>'
+    )
+    assertCodegen(
+      '<view><view class="item" v-for="i in 5" :key="i" @click="func(i)"></view></view>',
+      '<view><block wx:for="{{5}}" wx:for-item="i" wx:for-index="__i0__" wx:key="*this"><view data-event-opts="{{[[\'tap\',[[\'func\',[\'$0\'],[[[5,\'\',__i0__]]]]]]]}}" class="item" bindtap="__e"></view></block></view>'
+    )
   })
 
   it('generate class binding', () => {
@@ -586,6 +586,17 @@ describe('mp:compiler-extra', () => {
       '<block wx:for="{{$root.l0}}" wx:for-item="item" wx:for-index="i" wx:key="i"><text>{{item.g0}}</text></block>',
       'with(this){var l0=__map(list,function(item,i){var g0=item.split("").join(" ");return{$orig:__get_orig(item),g0:g0}});$mp.data=Object.assign({},{$root:{l0:l0}})}'
     )
+    assertCodegen(
+      `<view class="content">
+        <view v-for="(item, index) in tabList" :key="index">
+            <view v-for="(item2,index2) in list[item.key]" :key="index2" @click="show(item2.id, item2.id)">
+                {{formatIt(item2.id)}}
+            </view>
+        </view>
+    </view>`,
+      '<view class="content"><block wx:for="{{$root.l1}}" wx:for-item="item" wx:for-index="index" wx:key="index"><view><block wx:for="{{item.l0}}" wx:for-item="item2" wx:for-index="index2" wx:key="index2"><view data-event-opts="{{[[\'tap\',[[\'show\',[\'$0\',\'$1\'],[[[\'list.\'+item.$orig.key+\'\',\'\',index2,\'id\']],[[\'list.\'+item.$orig.key+\'\',\'\',index2,\'id\']]]]]]]}}" bindtap="__e">{{\'\'+item2.m0+\'\'}}</view></block></view></block></view>',
+      'with(this){var l1=__map(tabList,function(item,index){var l0=__map(list[item.key],function(item2,index2){var m0=formatIt(item2.id);return{$orig:__get_orig(item2),m0:m0}});return{$orig:__get_orig(item),l0:l0}});$mp.data=Object.assign({},{$root:{l1:l1}})}'
+    )
   })
 
   it('generate TemplateLiteral ', () => {
@@ -600,11 +611,11 @@ describe('mp:compiler-extra', () => {
       '<view data-test="{{\'hello\'+aaa}}"></view>'
     )
   })
-  it('generate event ', () => {
-    assertCodegen(
-      '<view @/>',
-      '<view></view>'
-    )
+  it('generate event ', () => {
+    assertCodegen(
+      '<view @/>',
+      '<view></view>'
+    )
 
     assertCodegen(
       '<text v-for="item in items[\'metas\']" :key="item[\'id\']" class="title" @tap="handle(item[\'id\'],item[\'title\'])">{{item.title}}</text>',
@@ -654,15 +665,15 @@ describe('mp:compiler-extra', () => {
       '<view v-for="item in list" @click="test(item)">{{ item }}</view>',
       '<block wx:for="{{list}}" wx:for-item="item" wx:for-index="__i0__"><view data-event-opts="{{[[\'tap\',[[\'test\',[\'$0\'],[[[\'list\',\'\',__i0__]]]]]]]}}" bindtap="__e">{{item}}</view></block>'
     )
-  })
-  it('generate bool attr', () => {
-    assertCodegen(
-      '<video id class style inline-template controls/>',
-      '<video id controls="{{true}}"></video>'
-    )
-    assertCodegen(
-      '<video controls=""/>',
-      '<video controls></video>'
-    )
+  })
+  it('generate bool attr', () => {
+    assertCodegen(
+      '<video id class style inline-template controls/>',
+      '<video id controls="{{true}}"></video>'
+    )
+    assertCodegen(
+      '<video controls=""/>',
+      '<video controls></video>'
+    )
   })
 })

packages/uni-template-compiler/lib/script/traverse/render-list.js

@@ -146,6 +146,7 @@ module.exports = function traverseRenderList (path, state) {
     identifierArray: state.identifierArray,
     propertyArray: [],
     declarationArray: [],
+    computedProperty: {},
     initExpressionStatementArray: state.initExpressionStatementArray
   }
 
@@ -173,6 +174,16 @@ module.exports = function traverseRenderList (path, state) {
     functionExpression.traverse(origVisitor, {
       forItem
     })
+    const keys = Object.keys(forState.computedProperty)
+    if (keys.length) {
+      keys.forEach(key => {
+        const property = forState.computedProperty[key]
+        if (t.isMemberExpression(property) && property.object.name === forItem) {
+          property.object = t.memberExpression(t.identifier(forItem), t.identifier(VAR_ORIGINAL))
+          forState.options.replaceCodes[key] = `'+${genCode(property, true)}+'`
+        }
+      })
+    }
   } else {
     forPath.traverse(require('./visitor'), forState)
   }

packages/uni-template-compiler/lib/util.js

@@ -133,6 +133,9 @@ function processMemberProperty (node, state) {
       }
       const identifier = '__$m' + (state.options.__m__++) + '__'
       state.options.replaceCodes[identifier] = `'+${genCode(property, true)}+'`
+      if (state.computedProperty) {
+        state.computedProperty[identifier] = property
+      }
       node.property = t.identifier(identifier)
     }
     node.computed = false