Skip to content

adding vue 3 composition api #1654

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
adumesny merged 1 commit into from
Mar 9, 2021
Merged

adding vue 3 composition api #1654

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
78 changes: 43 additions & 35 deletions demo/vue3js.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,27 +30,58 @@ <h1>How to integrate GridStack.js with Vue.js</h1>
</main>
<script type="module">
import { createApp } from "https://cdn.jsdelivr.net/npm/vue@3.0.0/dist/vue.esm-browser.js";
import { ref, onMounted } from "vue";

createApp({
data() {
setup() {
let count = ref(0);
let info = ref("");
let grid = null;
const items = [
{ x: 2, y: 1, h: 2 },
{ x: 2, y: 4, w: 3 },
{ x: 4, y: 2 },
{ x: 3, y: 1, h: 2 },
{ x: 0, y: 6, w: 2, h: 2 },
];

onMounted(() => {
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
grid.on("dragstop", (event, element) => {
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/
info.value = `you just dragged node #${node.id} to ${node.x},${node.y} – good job!`;
});
});

function addNewWidget() {
const node = items[count.value] || {
x: Math.round(12 * Math.random()),
y: Math.round(5 * Math.random()),
w: Math.round(1 + 3 * Math.random()),
h: Math.round(1 + 3 * Math.random()),
};
node.id = node.content = String(count.value++);
grid.addWidget(node);
}

return {
// grid: undefined, // <-- don't do that. see https://github.com/gridstack/gridstack.js/issues/1635
count: 0,
info: "",
info,
addNewWidget,
};
},
items: [
{ x: 2, y: 1, h: 2 },
{ x: 2, y: 4, w: 3},
{ x: 4, y: 2},
{ x: 3, y: 1, h: 2 },
{ x: 0, y: 6, w: 2, h: 2 }
],

watch: {
/**
* Clear the info text after a two second timeout. Clears previous timeout first.
*/
info: function (newVal, oldVal) {
info: function (newVal) {
if (newVal.length === 0) return;

window.clearTimeout(this.timerId);
Expand All @@ -59,29 +90,6 @@ <h1>How to integrate GridStack.js with Vue.js</h1>
}, 2000);
},
},
mounted: function () {
// Provides access to the GridStack instance across the Vue component.
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 = 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 ${node.x},${node.y} – good job!`;
});
},
methods: {
addNewWidget: function () {
const node = this.$options.items[this.count] || {
x: Math.round(12 * Math.random()),
y: Math.round(5 * Math.random()),
w: Math.round(1 + 3 * Math.random()),
h: Math.round(1 + 3 * Math.random()),
};
node.id = node.content = String(this.count++);
this.grid.addWidget(node);
},
},
}).mount("#app");
</script>
</body>
Expand Down