fix: v-for parsing

Author: antfu

src/parse.ts

@@ -44,8 +44,9 @@ export function parseVueSFC(code: string, id?: string): ParseResult {
           if (!value)
             return
           if (key.startsWith('v-') || key.startsWith('@') || key.startsWith(':')) {
-            if (key === 'v-if')
-              expressions.add(`for (let ${value}) {}`)
+            if (key === 'v-for')
+              // we strip out delectations for v-for before `in` or `of`
+              expressions.add(`(${value.replace(/^.*?\w(?:in|of)\w/, '')})`)
             else
               expressions.add(`(${value})`)
           }

test/__snapshots__/transform.test.ts.snap

@@ -86,7 +86,7 @@ exports[`transform fixture VFor.vue 1`] = `
 "<template>
   <div>
     <div v-for=\\"(item, index) in items\\" :key=\\"item\\">
-      {{ index }}: {{ item }}
+      {{ item }}
     </div>
   </div>
 </template>
@@ -108,6 +108,7 @@ __sfc_main.setup = (__props, __ctx) => {
     name: 'Item 4',
     value: 4
   }];
+  const index = 0;
   return {
     items
   };

test/fixtures/VFor.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div v-for="(item, index) in items" :key="item">
-      {{ index }}: {{ item }}
+      {{ item }}
     </div>
   </div>
 </template>
@@ -13,4 +13,6 @@ const items = [
   { name: 'Item 3', value: 3 },
   { name: 'Item 4', value: 4 },
 ]
+
+const index = 0
 </script>