From a39716674be766aa4f975c4c92119a4e76b3075a Mon Sep 17 00:00:00 2001
From: Alain Dumesny <alaind831+github@gmail.com>
Date: Mon, 21 Sep 2020 10:04:34 -0700
Subject: [PATCH] vue.js example tweaks

* added to index page and readme links, tweak to code.
---
 README.md       | 1 +
 demo/index.html | 1 +
 demo/vuejs.html | 9 ++++-----
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 17f6afa4b..78349f7e9 100644
--- a/README.md
+++ b/README.md
@@ -176,6 +176,7 @@ grid.printCount();
 
 search for ['gridstack' under NPM](https://www.npmjs.com/search?q=gridstack&ranking=popularity) for latest, more to come...
 
+- vue.js: see [demo](https://github.com/gridstack/gridstack.js/blob/develop/demo/vuejs.html) 
 - ember: [ember-gridstack](https://github.com/yahoo/ember-gridstack)
 - AngularJS: [gridstack-angular](https://github.com/kdietrich/gridstack-angular)
 - Angular8: [lb-gridstack](https://github.com/pfms84/lb-gridstack)
diff --git a/demo/index.html b/demo/index.html
index 3d4e51cf0..47c1451eb 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -17,6 +17,7 @@ <h1>Demos</h1>
     <li><a href="right-to-left(rtl).html">Right-To-Left (RTL)</a></li>
     <li><a href="serialization.html">Serialization</a></li>
     <li><a href="two.html">Two grids</a></li>
+    <li><a href="vuejs.html">Vue.js</a></li>
   </ul>
 </body>
 </html>
diff --git a/demo/vuejs.html b/demo/vuejs.html
index 7a3699f5f..d693e39d7 100644
--- a/demo/vuejs.html
+++ b/demo/vuejs.html
@@ -39,8 +39,7 @@ <h1>How to integrate GridStack.js with Vue.js</h1>
         >
         to let Vue deal with DOM rendering.
       </p>
-      <p>{{ info }}</p>
-      <button type="button" @click="addNewWidget()">Add Widget</button>
+      <button type="button" @click="addNewWidget()">Add Widget</button> {{ info }}
       <section class="grid-stack"></section>
     </main>
     <script type="module">
@@ -77,13 +76,13 @@ <h1>How to integrate GridStack.js with Vue.js</h1>
         },
         mounted: function () {
           // Provides access to the GridStack instance across the Vue component.
-          this.grid = GridStack.init({ float: true });
+          this.grid = GridStack.init({ float: true, cellHeight: '70px', minRow: 1 });
 
           // Use an arrow function so that `this` is bound to the Vue instance. Alternatively, use a custom Vue directive on the `.grid-stack` container element: https://vuejs.org/v2/guide/custom-directive.html
           this.grid.on("dragstop", (event, element) => {
-            const node = event.target.gridstackNode;
+            const node = element.gridstackNode;
             // `this` will only access your Vue instance if you used an arrow function, otherwise `this` binds to window scope. see https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/
-            this.info = `You just dragged node #${node.id} to x${node.x} y${node.y} – good job!`;
+            this.info = `you just dragged node #${node.id} to ${node.x},${node.y} – good job!`;
           });
         },
         methods: {