带有 VUE 元素的 GridStack 不是反应式的 如何使这些组件具有反应性？

问题描述

我想将 VUE 组件添加到 GridStack，但呈现的组件不是响应式的。

这是一个有问题的 CodePen：https://codepen.io/adelriosantiago/pen/qBaXjrr?editors=1010

GridStack 只接受 HTML，所以我要做的是使用 let instance = new gridStackItem(); 创建一个新的 Vue 实例，然后使用 instance.$mount(); 以在 instance.$el 中获取已编译的 HTML。

然后我按照 GridStack's documentation 继续 addWidget。添加的元素确实被正确编译（查看“SUBTEXT”文本是如何存在的）但是这些组件是“死的”（不是反应性的）并且无法通过 {{1} }（见下图）。

如何使这些组件具有反应性？

解决方法

我创建了 div 元素

let instance = new gridStackItem();
      
let div = document.createElement('div');
div.id = Math.random().toString(24).substring(8) // define id to access it later
      
instance.$mount(div);

并将 div 作为内容放入您的 addWidget

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

然后将您的组件实例附加为 div 子项

document.getElementById(div.id).appendChild(instance.$el)

它奏效了！诀窍是使用 div 作为 widget 和 instance 之间的连接器，这是更新的 Codepen