fix: fixes #2

Author: ygj6

vue-transformations/__test__/v-for-template-key.spec.ts

@@ -7,3 +7,10 @@ runTest(
   'vue',
   'vue'
 )
+runTest(
+  ':key is not the attribute of v-for template child',
+  'v-for-template-key',
+  'without-v-for-template',
+  'vue',
+  'vue'
+)

vue-transformations/__testfixtures__/v-for-template-key/without-v-for-template.input.vue

@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <div>
+      <switch-roles @change="handleRolesChange" />
+      <div :key="key">
+        <span v-permission="['button']">
+          <el-button type="button">button</el-button>
+        </span>
+      </div>
+    </div>
+  </div>
+</template>

vue-transformations/__testfixtures__/v-for-template-key/without-v-for-template.output.vue

@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <div>
+      <switch-roles @change="handleRolesChange" />
+      <div :key="key">
+        <span v-permission="['button']">
+          <el-button type="button">button</el-button>
+        </span>
+      </div>
+    </div>
+  </div>
+</template>

vue-transformations/v-for-template-key.ts

@@ -66,29 +66,31 @@ function fix(node: any): Operation[] {
   const target: any = node!.parent!.parent
 
   // The current node has no attribute that is v-for
-  let havaForBrother: boolean = false
+  let hasForAttr: boolean = false
   target.startTag.attributes
     .filter(
       (attr: any) =>
         attr.type === 'VAttribute' &&
         attr.key.type === 'VDirectiveKey' &&
         attr.key.name.name === 'for'
     )
-    .forEach((element: any) => {
-      havaForBrother = true
+    .forEach(() => {
+      hasForAttr = true
     })
-  if (havaForBrother) {
+  if (hasForAttr) {
     return fixOperations
   }
 
   let elder: any = null
-  let elderHasKey: any = false
-  let tmp: any = target.parent
+  let elderHasKey: boolean = false
+  let elderHasFor: boolean = false
+  let tmp: any = target
   // find template parent
   while (elder == null && tmp != null) {
     elderHasKey = false
-    if (tmp.type != 'VElement' || tmp.name != 'template') {
-      tmp = tmp.parent
+    elderHasFor = false
+    tmp = tmp.parent
+    if (tmp == null || tmp.type != 'VElement' || tmp.name != 'template') {
       continue
     }
 
@@ -97,36 +99,42 @@ function fix(node: any): Operation[] {
         (attr: any) =>
           attr.type === 'VAttribute' &&
           attr.key.type === 'VDirectiveKey' &&
-          attr.key.name.name === 'bind' &&
-          attr.key.argument?.type === 'VIdentifier' &&
-          attr.key.argument?.name === 'key'
+          attr.key.name.name === 'for'
       )
       .forEach((element: any) => {
-        elderHasKey = true
+        elderHasFor = true
+        elder = element
       })
 
-    if (elderHasKey) {
-      break
-    }
-
     tmp.startTag.attributes
       .filter(
         (attr: any) =>
           attr.type === 'VAttribute' &&
           attr.key.type === 'VDirectiveKey' &&
-          attr.key.name.name === 'for'
+          attr.key.name.name === 'bind' &&
+          attr.key.argument?.type === 'VIdentifier' &&
+          attr.key.argument?.name === 'key'
       )
-      .forEach((element: any) => {
-        elder = element
+      .forEach(() => {
+        elderHasKey = true
       })
+
+    if (elderHasFor) {
+      break
+    }
+  }
+
+  if (!elderHasFor) {
+    return fixOperations
   }
 
   let expression: string = getExpression(node.value)
 
   fixOperations.push(OperationUtils.remove(node))
   if (
+    !elderHasKey &&
     util.inspect(operatingParentElements).indexOf(util.inspect(elder.range)) ==
-    -1
+      -1
   ) {
     operatingParentElements.push(elder.range)
     fixOperations.push(