fix: Typo in defineDirective (Closes #35) (#36)

* fix: typo `updated` => `update` * Add the test page for a directive update
scaccogatto · Mar 18, 2020 · fdeb078 · fdeb078
1 parent 042d761
commit fdeb078
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 2 deletions.
diff --git a/dist/vue-waypoint.js b/dist/vue-waypoint.js
diff --git a/src/directive.js b/src/directive.js
@@ -12,7 +12,7 @@ const defineDirective = Vue => {
         vnode._waypoint = waypoint
       }
     },
-    updated (el, binding, vnode, oldVnode) {
+    update (el, binding, vnode, oldVnode) {
       const { active, callback, options } = binding.value
 
       // we remove the old observer anyways

diff --git a/test/update.html b/test/update.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>vue-waypoint directive update test</title>
+  <script src="https://unpkg.com/vue"></script>
+  <script src="../dist/vue-waypoint.js"></script>
+  <style>
+    .wrapper {
+      width: 300vw;
+      height: 300vh;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .visible {
+      background-color: #48e400;
+    }
+    .waypoint {
+      width: 400px;
+      height: 50px;
+    }
+  </style>
+</head>
+<body>
+  <div id="app">
+    <div class="wrapper" :class="{ visible }">
+      <button
+        v-waypoint="{ active, callback }"
+        class="waypoint"
+        @click="active = !active"
+      >
+        Waypoint holder (<b>click to {{ active ? 'deactivate' : 'activate' }}</b>)
+      </button>
+    </div>
+  </div>
+
+  <script>
+    var app = new Vue({
+      el: '#app',
+      data: {
+        active: true,
+        visible: false
+      },
+      methods: {
+        callback({ going }) {
+          this.visible = going == this.$waypointMap.GOING_IN
+        }
+      }
+    })
+  </script>
+</body>
+</html>