Skip to content

Commit a397166

Browse files
committed
vue.js example tweaks
* added to index page and readme links, tweak to code.
1 parent b3febc0 commit a397166

File tree

3 files changed

+6
-5
lines changed

3 files changed

+6
-5
lines changed

README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -176,6 +176,7 @@ grid.printCount();
176176

177177
search for ['gridstack' under NPM](https://www.npmjs.com/search?q=gridstack&ranking=popularity) for latest, more to come...
178178

179+
- vue.js: see [demo](https://github.com/gridstack/gridstack.js/blob/develop/demo/vuejs.html)
179180
- ember: [ember-gridstack](https://github.com/yahoo/ember-gridstack)
180181
- AngularJS: [gridstack-angular](https://github.com/kdietrich/gridstack-angular)
181182
- Angular8: [lb-gridstack](https://github.com/pfms84/lb-gridstack)

demo/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ <h1>Demos</h1>
1717
<li><a href="right-to-left(rtl).html">Right-To-Left (RTL)</a></li>
1818
<li><a href="serialization.html">Serialization</a></li>
1919
<li><a href="two.html">Two grids</a></li>
20+
<li><a href="vuejs.html">Vue.js</a></li>
2021
</ul>
2122
</body>
2223
</html>

demo/vuejs.html

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,7 @@ <h1>How to integrate GridStack.js with Vue.js</h1>
3939
>
4040
to let Vue deal with DOM rendering.
4141
</p>
42-
<p>{{ info }}</p>
43-
<button type="button" @click="addNewWidget()">Add Widget</button>
42+
<button type="button" @click="addNewWidget()">Add Widget</button> {{ info }}
4443
<section class="grid-stack"></section>
4544
</main>
4645
<script type="module">
@@ -77,13 +76,13 @@ <h1>How to integrate GridStack.js with Vue.js</h1>
7776
},
7877
mounted: function () {
7978
// Provides access to the GridStack instance across the Vue component.
80-
this.grid = GridStack.init({ float: true });
79+
this.grid = GridStack.init({ float: true, cellHeight: '70px', minRow: 1 });
8180

8281
// 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
8382
this.grid.on("dragstop", (event, element) => {
84-
const node = event.target.gridstackNode;
83+
const node = element.gridstackNode;
8584
// `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/
86-
this.info = `You just dragged node #${node.id} to x${node.x} y${node.y} – good job!`;
85+
this.info = `you just dragged node #${node.id} to ${node.x},${node.y} – good job!`;
8786
});
8887
},
8988
methods: {

0 commit comments

Comments
 (0)