Struggling to get Vuetify tabs to work alongside masonry.js, any solutions available?

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:

Answer №1

After some trial and error, I decided to switch from using masonry.js to vue-stack-grid since it served a similar purpose and integrated well within the tabs section.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The method to update the shopping cart quantity count without needing to refresh the page or navigate to a separate page

One issue I am facing is with the code that displays a live count of items in the shopping cart. It doesn't update instantly, requiring a page reload or navigation to another page for the changes to be visible. The current code is implemented on a pa ...

Struggling to maintain context with axios in React despite diligent use of arrow functions

In my component, I have a function for posting data. Although it works well, the context of my component is lost in the success message. This is puzzling because I am using arrow functions. Why does the "this" context get lost in this situation? The issu ...

Trouble arises when attempting to delete rows from my database with the use of HTML, PHP, and

I am developing an application where I have implemented this table: <?php require_once 'Connect2db3.php'; ?> <form> <fieldset> <article class="rondehoeken"> <header> <div class="streep1"></div& ...

Nextjs server encountered an issue where it was unable to connect to the localhost

npm run dev > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="563239352239247b372626393f38223b3338227b3439393d3f38317b2133347b372626166678677866">[email protected]</a> dev > next dev ▲ Next.js 14.2. ...

Are beta versions included in the "latest" versions of package.json?

Within the package.json file, you have the option to define a package to be synchronized with the most recent version: { ..., "devDependencies": { "gulp": "latest", ... }, ... } When "latest" is specified, does it encompass alpha ...

The Material-UI Select component does not reflect changes after an onChange event

I've encountered this issue all over the internet, but no explanation seems to resolve it for me. Using Material-UI Select and traditional setState(...) in React (not using hooks). The core of my component is as follows: class MyComponent extends Co ...

Exploring the combination of vuedraggable with transition groups and header slots

I successfully implemented code with a transition group to create a flip animation <draggable v-model="items" group="backlog-posts" animation="200" handle=".post-content" draggable=".drag-item" @start="drag = true" @end="dra ...

Choosing a specific element within another element of the same type using JQuery

I've created a complex nested HTML structure shown below: <ul class="root"> <li>Foo 1 <label class="bar-class">bar</label> <ul> <li>Foo 2 <label class="bar-class">bar</label> ...

Obtaining a compressed file via a specified route in an express API and react interface

Feeling completely bewildered at this point. I've had some wins and losses, but can't seem to get this to work. Essentially, I'm creating a zip file stored in a folder structure based on uploadRequestIds - all good so far. Still new to Node, ...

Playing around with Segment Analytics testing using Jest in TypeScript

I've been struggling to write a unit test that verifies if the .track method of Analytics is being called. Despite my efforts, the test keeps failing, even though invoking the function through http does trigger the call. I'm unsure if I've i ...

What is the best way to send a PHP variable in a WordPress AJAX request?

I have embedded a post (CPT) using a shortcode. Now, I want to filter the content of this embedded post using AJAX by sending its ID in the ajax call. The ID of the embedded post is retrieved from a shortcode like [documentlist listid="2126"]. $atts = sh ...

The divs are crashing into each other and moving at varying speeds

I have created a mini game inspired by diep.io on codepen, where you can upgrade your reload and shooting capabilities. However, I have encountered an issue where the bullets start moving at different speeds and end up overlapping each other after shooting ...

Utilizing npm packages from third-party sources within a custom extension for personal use (not intended for distribution)

Exploring the idea of developing a basic Firefox extension that involves external modules such as Firebase and Cheerio, but there doesn't seem to be much information available on this topic. I noticed there are legacy options like jpm, but they'r ...

What are some ways to create a responsive image design?

Currently, I am using the code below to enlarge an image when clicked on. I have attempted using media queries in CSS... I have also added another class in #modalPopupHtml# to adjust the size of the large image: .imgsize{ height: 600px; width: 800px; ...

Surprising message found within a pug file containing javascript code

I'm encountering an issue that I am unsure how to resolve. I am relatively new to working with pug files and the error message below is appearing: Error: /home/nobin/jadeApp/views/show_message.pug:9:33 7| else 8| h3 New person, ...

Leverage the power of AJAX and PHP to securely save comments for future

I have coded a JavaScript function that uses POST and GET methods to send comments from an input field and retrieve them when the page reloads. However, I am unsure of how to handle the data after it is sent in order to save it and access it again later. E ...

Unable to successfully call a directive function from a nested child directive

I'm facing a challenge with utilizing a directive that was created by another developer to notify my directive when the ngRepeat inside of it has completed its creation. My parent directive has an isolate scope and includes a function within its scop ...

Transferring state to a nested child component within a parent component's child

Currently, I am in the process of developing a KanBan application using ReactJS. My main goal is to propagate the state from a parent component to the farthest child component in the hierarchy. Within my main App component, there exists a Column component, ...

Preserving the initial input values in a secure manner for future reference, utilizing either an object or a

Recently, I've started revisiting a script I created a while back that checks for changes in a form to prompt a message asking 'Would you like to save your changes?'... One thing that's been on my mind is whether I should store the ori ...

The NFT image tracking is functioning properly on the local device, however, it is encountering an error on

Having recently started working with AR.js, I've been experimenting with running NFT markers using Three.js and a custom image to display a model. While everything runs smoothly on localhost, I encountered a 404 "onError" message when trying to upload ...