As I work on building a photo gallery using vuetify and masonry.js, my goal is to have multiple tabs with images laid out in a masonry style. While using masonry.js for the layout and vuetify for the tabs, I encountered an issue where only the initial tab displays properly while the others do not. This could be due to the tabs not being loaded initially, causing window.onload() not to function correctly.
window.onload = () => {
const grid = document.querySelector(".grid");
const masonry = new Masonry(grid, {
itemSelector: ".grid-item",
columnWidth: ".grid-sizer",
fitWidth: true,
});
methods: {
handleMason() {
console.log("Handled");
const grid = document.querySelector(".grid");
var masonry = new Masonry(grid, {
itemSelector: ".grid-item",
columnWidth: ".grid-sizer",
fitWidth: true,
});
},
},
Although the handleMason() method is successfully called (as indicated by the console.log output), the styling of the images does not behave as expected within the function. Please excuse my lack of clarity in this question, as it is my first time seeking assistance here.
EDIT
To better illustrate the problem, I have created a repository:
https://github.com/Hi-Im-Jony/masonry-gallery/tree/master
The deployed site can also be accessed via netlify at: