Using GridStack in combination with VUE causes issues with reactivity

Question

Using GridStack in combination with VUE causes issues with reactivity

I'm struggling with adding VUE components to a GridStack because they aren't reacting properly.

Check out the issue in this CodePen: https://codepen.io/adelriosantiago/pen/qBaXjrr?editors=1010

Since GridStack only accepts HTML, my workaround involves creating a new Vue instance using

let instance = new gridStackItem();

and then mounting it with instance.$mount(); to access the compiled HTML in instance.$el.

After that, I use addWidget following GridStack's documentation. The added elements appear correctly (you can see "SUBTEXT" text) but unfortunately, these components are not reactive, as indicated by the inability to change their text via the input field (refer to image below).

https://i.sstatic.net/g170L.png

What steps should I take to make these components reactive?

javascript vue.js vue-component gridstack

Answer 1

Answer №1

The creation of a new div element was successful.

let item = new gridStackItem();
      
let newDiv = document.createElement('div');
newDiv.id = Math.random().toString(24).substring(8) // setting an id for future access
      
item.$mount(newDiv);

Next, insert the newly created div as content in your addWidget.

let widget = this.grid.addWidget({
  x: Math.round(Math.random() * 5),
  y: Math.round(Math.random() * 5),
  w: 4,
  h: 2,
  content: newDiv.outerHTML
});

Subsequently, add your component instance as a child of the div.

document.getElementById(newDiv.id).appendChild(item.$el)

This approach proved to be effective! Using the div as a connection point between the widget and instance was the key. See the updated version on Codepen

Answer 2

The creation of a new div element was successful.

let item = new gridStackItem();
      
let newDiv = document.createElement('div');
newDiv.id = Math.random().toString(24).substring(8) // setting an id for future access
      
item.$mount(newDiv);

Next, insert the newly created div as content in your addWidget.

let widget = this.grid.addWidget({
  x: Math.round(Math.random() * 5),
  y: Math.round(Math.random() * 5),
  w: 4,
  h: 2,
  content: newDiv.outerHTML
});

Subsequently, add your component instance as a child of the div.

document.getElementById(newDiv.id).appendChild(item.$el)

This approach proved to be effective! Using the div as a connection point between the widget and instance was the key. See the updated version on Codepen

Using GridStack in combination with VUE causes issues with reactivity

What steps should I take to make these components reactive?

Answer №1

Similar questions

Retrieve facet queries in JSON format from Solr using JavaScript

A gathering focused on the pause function of a bootstrap carousel

Listening to multiple events in AngularJS using `$scope.$on`

adding a variable to the value of an input field using the val() method

Socket.io connects two clients together in a room

When I try to post using the raw feature in Postman in Node.js, the post ends up empty

Creating a simulation of a JavaScript callback within a C# host program

Utilizing @Material-UI Tabs for a Stylish Navigation Bar

qunit timer reset

Updating a connected model in Sequelize using another model

Exploring the concept of module patterns in JavaScript

Matching URLs with wildcards in a Chrome Extension using Javascript

The error message states: "Dygraph is not defined."

Vue Router unexpectedly triggers two URL updates when a single push() call is made

Unable to retrieve uploaded files within the controller

Tips on implementing {% csrf_token %} with javascript

What is the best way to simulate this function in a jest test for a react component?

Retrieve the element from the most recent append() function invocation

Sharing data from a Provider to a function in React can be done through various methods

Comparing two jQuery methods for looping through Ajax requests - which one is the best option?