Add before destroy teardown

.eslintrc.js

@@ -0,0 +1,28 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    node: true,
+  },
+  extends: [
+    "eslint:recommended",
+    "plugin:vue/recommended",
+  ],
+  parserOptions: {
+    ecmaVersion: 2020,
+  },
+  rules: {
+    indent: ["error", 2],
+    quotes: ["error", "double"],
+    semi: ["error", "always"],
+    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
+    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
+    "no-undef": 0,
+    "no-unused-vars": ["error", { "args": "none" }],
+    "vue/component-definition-name-casing": ["error", "kebab-case"],
+    "keyword-spacing": ["error"],
+    "vue/multi-word-component-names": ["error", {
+      "ignores": ["Payment"]
+    }]
+  },
+};

CHANGELOG.md

@@ -1 +1,3 @@
-// TODO: release log here ...
+2.2.0
+
+teardown() is called when the component is destroyed (https://github.com/francoislevesque/vue-braintree/issues/42)

babel.config.js

@@ -1,5 +1,5 @@
 module.exports = {
   presets: [
-    '@vue/cli-plugin-babel/preset'
+    "@vue/cli-plugin-babel/preset"
   ]
-}
+};

demo/Demo.vue

@@ -6,9 +6,10 @@
     <h1>Braintree Demo</h1>
 
     <v-braintree 
+      v-if="showDropIn"
       authorization="sandbox_9q89mhss_x742hzxzgx6gk233"
       :paypal="{flow: 'vault'}"
-      :three-d-secure="true"
+      :three-d-secure="false"
       :three-d-secure-parameters="{
         amount: 100, 
         email: '[email protected]', 
@@ -39,6 +40,13 @@
     <button class="btn">
       Clear Payment Selection
     </button>
+
+    <br>
+    <br>
+
+    <button @click="deleteInstance" class="btn btn-danger">
+      Delete instance
+    </button>
   </div>
 </template>
 
@@ -47,26 +55,34 @@ export default {
   name: 'demo',
   data () {
     return {
-      instance: null
+      instance: null,
+      showDropIn: true,
     }
   },
   methods: {
     onLoad (instance) {
       this.instance = instance;
     },
     onLoadFail (instance) {
-      alert('load fail');
+      console.error('Load fail', instance);
     },
     onSuccess (payload) {
       console.log("Success!", payload.nonce);
     },
     onError (error) {
-      console.log("Error!", error);
+      console.error("Error:", error);
     },
     clearPaymentSelection () {
       if (this.instance != null) {
         this.instance.clearSelectedPaymentMethod();
       }
+    },
+    deleteInstance() {
+      this.showDropIn = false;
+
+      setInterval(() => {
+        this.showDropIn = true;
+      }, 1000);
     }
   }
 }

jest.config.js

@@ -1,8 +1,8 @@
 module.exports = {
-  preset: '@vue/cli-plugin-unit-jest',
+  preset: "@vue/cli-plugin-unit-jest",
   collectCoverage: true,
   collectCoverageFrom: [
-    'src/**/*.{js,vue}',
-    '!src/main.js',
+    "src/**/*.{js,vue}",
+    "!src/main.js",
   ],
-}
+};