refactor(directive): v-for add map and set

pages/directive/v-for/v-for-composition.uvue

@@ -18,7 +18,10 @@
       </view>
 
       <view class="bold mb-10">v-for & v-if list items</view>
-      <view id="v-for-v-if-list-items" v-for="item in listItems" :key="item.name">
+      <view
+        id="v-for-v-if-list-items"
+        v-for="item in listItems"
+        :key="item.name">
         <template v-if="item.show">
           <view class="mb-10 flex justify-between flex-row">
             <text :id="item.name">{{ item.name }}</text>
@@ -63,6 +66,18 @@
           }}</text>
         </view>
       </view>
+
+      <view
+        class="mb-10 flex justify-between flex-row"
+        v-for="item in mapList"
+        :key="item[0]">
+        <text>{{ item[0] }}</text>
+        <text :id="item[0]">{{ item[1] }}</text>
+      </view>
+
+      <view class="mb-10" v-for="(item, index) in setList" :key="index">
+        <text :id="`set-value-${index + 1}`">{{ item }}</text>
+      </view>
     </view>
     <!-- #ifdef APP -->
   </scroll-view>
@@ -111,4 +126,12 @@ const listItems = ref([
     ]
   },
 ] as ListItem[])
+
+const mapList = new Map<string, string>([
+  ['map-key-1', 'map value 1'],
+  ['map-key-2', 'map value 2'],
+  ['map-key-3', 'map value 3'],
+])
+
+const setList = new Set<string>(['set value 1', 'set value 2', 'set value 3'])
 </script>

pages/directive/v-for/v-for-options.uvue

@@ -66,6 +66,18 @@
           }}</text>
         </view>
       </view>
+
+      <view
+        class="mb-10 flex justify-between flex-row"
+        v-for="item in mapList"
+        :key="item[0]">
+        <text>{{ item[0] }}</text>
+        <text :id="item[0]">{{ item[1] }}</text>
+      </view>
+
+      <view class="mb-10" v-for="(item, index) in setList" :key="index">
+        <text :id="`set-value-${index + 1}`">{{ item }}</text>
+      </view>
     </view>
     <!-- #ifdef APP -->
   </scroll-view>
@@ -86,6 +98,7 @@ type ListItem = {
   items?: ListItem[]
 }
 
+// TODO: v-for map set deep array 动态增加删除
 export default {
   data() {
     return {
@@ -116,6 +129,12 @@ export default {
           ]
         },
       ] as ListItem[],
+      mapList: new Map<string, string>([
+        ['map-key-1', 'map value 1'],
+        ['map-key-2', 'map value 2'],
+        ['map-key-3', 'map value 3'],
+      ]),
+      setList: new Set<string>(['set value 1', 'set value 2', 'set value 3']),
     }
   }
 }

pages/directive/v-for/v-for.test.js

@@ -33,6 +33,20 @@ describe('v-for', () => {
     await vShow1Count.tap()
     expect(await vShow1Count.text()).toBe('2')
     
+    const mapValue1 = await page.$('#map-key-1')
+    expect(await mapValue1.text()).toBe('map value 1')
+    const mapValue2 = await page.$('#map-key-2')
+    expect(await mapValue2.text()).toBe('map value 2')
+    const mapValue3 = await page.$('#map-key-3')
+    expect(await mapValue3.text()).toBe('map value 3')
+    
+    const setValue1 = await page.$('#set-value-1')
+    expect(await setValue1.text()).toBe('set value 1')
+    const setValue2 = await page.$('#set-value-2')
+    expect(await setValue2.text()).toBe('set value 2')
+    const setValue3 = await page.$('#set-value-3')
+    expect(await setValue3.text()).toBe('set value 3')
+    
     await page.waitFor(500)
     
     const image = await program.screenshot({