Refresh Vue masonry modules

I have a list of cards where I am using masonry. Whenever a new card is added, I need to reload masonry. Unfortunately, I'm unsure how to call the function to accomplish this.

mounted(){
  let wrapper = this.$refs.wrapper;
  let msnry = new Masonry(wrapper, {
    itemSelector: '.note',
    gutter: 10,
    percentPosition: true
  });
}

watch: {
  array: function(val) { // watching for changes
    if(val){
      msnry.reloadItems(); // reloading items
      msnry.layout(); // rerendering layout
    }
  }
}

Should msnry be globally defined? I noticed that in the React tutorial, it's called in the same way. How should I approach this?

javascriptvue.jsvuejs2

Answer №2

Finding a solution

If you're experiencing difficulties, consider adjusting your watcher to observe changes in the array more thoroughly:

watch: {
  array: {
    deep: true,
    handler: function(val) { // keep an eye on it
      if(val){
        updateItems(); // refresh items
        rearrangeLayout(); // modify layout
      }
    }
  }
}

You can find additional information within the documentation.

Exploring a masonry option

Another alternative is using a masonry vue component that simplifies the process for you: https://github.com/shershen08/vue-masonry

This component builds upon the same library but offers a more convenient way to integrate it into other Vue components.

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

What is the process of retrieving information using a slot in Vue.js?

Here is a code snippet I am working with: <template slot="name" slot-scope="row">{{row.value.first}} {{row.value.last}}</template> In addition, I have a header section. { isActive: true, age: 38, name: { first: 'Ja ...

vue.jsvuejs2axiosvue-componentvuetify.js

How can I create a menu of buttons in Vue that open individual windows with unique URLs when clicked?

Javascript Code: function InitializeVue() { var vueOptions = { el: '#activeEvents', data: { activeEvents: [] } }; vueInstance = new Vue(vueOptions); } HTML Code: <table id="activeEvents"> ...

javascriptasp.netvue.js

What could be causing my Three.js code to fail during testing?

Recently, I decided to delve into the world of Three.js by following a thorough tutorial. While everything seemed perfectly fine in my code editor of choice (Visual Studio Code 2019), I encountered a frustrating issue when I attempted to run the code and n ...

javascriptgoogle-chromethree.js

Making modifications to the CSS within an embedded iframe webpage

Assigned with the task of implementing a specific method on a SharePoint 2013 site. Let's dive in. Situation: - Within a page on a SharePoint 2013 site, there is a "content editor" web part that displays a page from the same domain/site collection. T ...

javascriptjqueryhtmlcssiframe

Using the hide() and show() functions may result in sporadic page jumps

My table is filled with information about job listings that a user is interested in. Here's how the structure looks: <div class="container"> <table class="table-responsive table-hover table-bordered col-sm-12 col-md-6 col-md-offset-1 col ...

javascriptjqueryhtmlcss

Oops! Looks like there's a problem with the helper called "if_equal" in Handlebars

I attempted to incorporate handlebars into my express node application, but it appears to be malfunctioning. const express = require('express'); const hbs = require('hbs'); const expressHbs = require('express-handlebars'); c ...

javascriptnode.jsexpresshandlebars.js

The proxy feature in create-react-app does not function properly

When setting up my React app using create-react-app, I included the following in my package.json: After setting "proxy":"http://localhost:3001" in the package.json file to point to my API server running on port 3001, I encountered an issue where requests ...

javascriptnode.jsreactjscreate-react-app

What steps should I follow to set JSONP as the dataType for a request in an Angular $http service?

I have a good understanding of how to use jQuery's $.ajax: $.ajax({ url: //twitter endpoint, method:"GET", dataType:"jsonp", success:function() { //stuff } }); Is there a way to set the JSONP datatype for an angular $http service reque ...

javascriptajaxhttpangularjs

The specified type '{}' cannot be assigned to type 'ReactNode'

Can someone help me figure out why I am getting this error in Vercel but not locally? Error: 'FontAwesomeIcon' cannot be used as a JSX component. ./components/Services/ServiceContainer.tsx:25:6 12:01:54.967 Type error: 'FontAwesomeIcon&a ...

javascriptreactjsnext.jsvercel

Using the event object with fullCalendar.formatDate: A step-by-step guide

I am struggling to implement the formatDate function with the event object retrieved from the eventMouseOver method and it doesn't seem to be working as expected. Do you have any recommendations? Below is the snippet of my code: eventMouseover: func ...

javascriptjqueryajaxfullcalendarjquery-events

Dropping challenging shapes in a block-matching game similar to Tetris

I'm currently working on a game similar to Tetris, but with a twist. Instead of removing just one line when it's full, I want to remove all connected pieces at once. However, I've run into a roadblock when trying to implement the hard-drop f ...

javascripthtmlgame-physicstetris

Sorting of array in AngularJS ngRepeat may result in changing the length of the array

Link to JSFiddle: http://jsfiddle.net/WdVDh/101/. When updating the sorting option for an ng-repeat list, I noticed that the array length changes and in my local version, all items disappear. My code involves filtering and sorting, with the ability to fi ...

javascriptarraysangularjssortingangularjs-material

What is the best way to integrate node, express, mongodb when using angularjs?

I've successfully developed an app using node, express, and mongodb (Building a RESTful API in Node, Express and MongoDB). I now want to integrate an Angular frontend into my application. Below is the content of my server.js file. What modifications s ...

javascriptangularjsnode.jsmongodb

Updating visual appearance with button clicks and unclicks

Is there a way to dynamically update the button image while clicking on it? This is what I have tried: $('.gamebox_minimap_plus').click(function() { $(this).css("background-image","url('gfx/plus2.png')"); }); The image ch ...

javascriptjqueryimagebutton

Exploring the Vue-cli version 3 BETA's webpack setup

I am currently exploring the new version of vuejs/vue-cli ( beta 3.0 ) that promises to simplify webpack configuration significantly. However, there are limited examples available at this time... As part of my testing, I attempted to transition from vue-c ...

javascriptvue.jswebpackvuejs2vue-cli

Verify whether the element is currently visible within an iframe on the same domain

My goal with jQuery is to determine element visibility on a webpage. In my website, there is an iframe within one of the pages. Typically, I check for element visibility using the following code: if($('.tabContentContainer').is(':visible& ...

javascriptjqueryiframe

Using regular expressions to eliminate the width attribute from tables

Currently, I am carrying out some HTML processing before storing the data in the database. If a user pastes content containing HTML tables, I need to eliminate certain tags and attributes. To extract the table content, I am using content.match('<t ...

javascripthtmlcssregex

Passing image source from parent component to child component in Vue.js

I encountered an issue where I stored the image file name in a variable within the parent component and passed it to the child component using props. However, despite this setup, the child element is not displaying the image as expected. Here is the data ...

javascripthtmlvue.js

Tips for transforming a few Nuxt snippets into Vue components

What is the best approach to transform this Nuxt script into a Vue-compatible one? <script> export default { components: { FeaturedProduct }, async asyncData({ axios }) { try { let response = await axios.get( 'http:// ...

javascriptvue.jsvuejs2vue-componentnuxt.js

Is there a way to use jQuery to hide rows in a data table that contain a specific code, such as "1.1" or "1.2," that includes a

When using ajax, I pass data from two inputs to another page. These values are then used in a query to display the results in a data table on the main page within the success function. Now, I'm looking to implement a condition where any data containi ...

javascriptphpjquerymysqlweb