From 0fc9493cbab3258e1c6e4560900a3b035ce48fe0 Mon Sep 17 00:00:00 2001
From: ygj6 <yuangongji@foxmail.com>
Date: Fri, 18 Jun 2021 15:51:13 +0800
Subject: [PATCH] fix: fixes #2

---
 .../__test__/v-for-template-key.spec.ts       |  7 +++
 .../without-v-for-template.input.vue          | 12 +++++
 .../without-v-for-template.output.vue         | 12 +++++
 vue-transformations/v-for-template-key.ts     | 48 +++++++++++--------
 4 files changed, 59 insertions(+), 20 deletions(-)
 create mode 100644 vue-transformations/__testfixtures__/v-for-template-key/without-v-for-template.input.vue
 create mode 100644 vue-transformations/__testfixtures__/v-for-template-key/without-v-for-template.output.vue

diff --git a/vue-transformations/__test__/v-for-template-key.spec.ts b/vue-transformations/__test__/v-for-template-key.spec.ts
index 60e3004..8576368 100644
--- a/vue-transformations/__test__/v-for-template-key.spec.ts
+++ b/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'
+)
diff --git a/vue-transformations/__testfixtures__/v-for-template-key/without-v-for-template.input.vue b/vue-transformations/__testfixtures__/v-for-template-key/without-v-for-template.input.vue
new file mode 100644
index 0000000..cdc3673
--- /dev/null
+++ b/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>
diff --git a/vue-transformations/__testfixtures__/v-for-template-key/without-v-for-template.output.vue b/vue-transformations/__testfixtures__/v-for-template-key/without-v-for-template.output.vue
new file mode 100644
index 0000000..cdc3673
--- /dev/null
+++ b/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>
diff --git a/vue-transformations/v-for-template-key.ts b/vue-transformations/v-for-template-key.ts
index 6cbe9c3..f7d280e 100644
--- a/vue-transformations/v-for-template-key.ts
+++ b/vue-transformations/v-for-template-key.ts
@@ -66,7 +66,7 @@ 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) =>
@@ -74,21 +74,23 @@ function fix(node: any): Operation[] {
         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(