Vue3中GridStack从JSON加载布局后组件无法渲染问题排查

核心问题1：Grid容器选择器错误 #

你的loadFullGrid方法里，GridStack.addGrid使用了document.querySelector('#gs-id')，但实际Grid容器是class为grid-stack的section，不存在gs-id这个id，导致无法找到容器，自然无法重建Grid。

核心问题2：Vue动态内容未被编译 #

你通过Vue的v-for渲染组件，但调用GridStack的addGrid直接插入序列化的HTML内容时，这些内容未经过Vue编译处理。Vue仅在初始化挂载时解析模板中的指令与组件，动态插入的HTML字符串里的Vue组件（如<component :is="component.name">）不会被识别，也无法触发组件实例化。

核心问题3：序列化数据不匹配Vue场景 #

GridStack的save(true, true)会完整保存DOM的innerHTML，其中包含Vue的编译痕迹（如data-v-bd6d1993这类作用域ID）以及渲染后的静态HTML，而非Vue组件的原始配置信息。直接用该HTML恢复，无法重建Vue组件的响应式能力与实例。

正确实现思路 #

1. 修正Grid容器选择器
   将document.querySelector('#gs-id')改为document.querySelector('.grid-stack')，确保能定位到Grid容器。

2. 通过Vue数据驱动重建布局
   放弃直接使用GridStack的HTML序列化内容，转而保存和恢复Vue组件的配置数据（即你的components数组）：

   • 保存时：仅序列化components数组（包含组件名称、props、网格位置），而非DOM的HTML内容。
   • 加载时：清空当前components数组，将保存的配置数据重新赋值，让Vue通过v-for自动重新渲染组件，之后再初始化GridStack。

3. 调整GridStack初始化逻辑
   加载时先更新Vue的components数据，等待Vue完成DOM渲染后，再重新初始化GridStack（或调用GridStack的load方法，而非销毁重建）。

修改后的示例代码 #

HTML部分（保持不变） #

<button class="x-btn" @click="saveFullGrid()">Save Full</button>
<button class="x-btn" @click="loadFullGrid()">Load Full</button>
<hr />
<textarea id="saved-data" cols="100" rows="20" readonly="readonly"></textarea>

<section class="grid-stack">
    <div v-for="(component, key, index) in components" :key="'component' + index" :gs-id="key"
        class="grid-stack-item" :gs-x="component.gridPos.x" :gs-y="component.gridPos.y" :gs-h="component.gridPos.h"
        :gs-w="component.gridPos.w" gs-auto-position="true">
        <div class="grid-stack-item-content">
            <component :is="component.name" v-bind="component.props" />
            <button class="edit" @click="remove(index, key, component)">Remove</button>
        </div>
    </div>
    <hr />
</section>

Script部分（修改核心逻辑） #

// 保存时只存储Vue组件的配置数据，而非DOM内容
function saveFullGrid() {
    // 获取当前Grid布局位置，更新components数组里的gridPos
    const gridItems = grid.getItems();
    gridItems.forEach(item => {
        const componentKey = item.getAttribute('gs-id');
        const component = components.find(c => Object.keys(c)[0] === componentKey);
        if (component) {
            component.gridPos = {
                x: item.x,
                y: item.y,
                w: item.width,
                h: item.height
            };
        }
    });
    // 序列化components数组
    const savedConfig = JSON.stringify(components, null, '  ');
    document.querySelector('#saved-data').value = savedConfig;
    // 后续可将savedConfig存入数据库
}

// 加载时通过Vue数据驱动重建布局
async function loadFullGrid() {
    const savedData = document.querySelector('#saved-data').value;
    if (!savedData) return;
    
    // 清空当前components数组
    components = [];
    // 解析保存的配置并赋值
    components = JSON.parse(savedData);
    
    // 等待Vue完成DOM更新
    await nextTick();
    
    // 销毁旧的Grid实例
    if (grid) {
        grid.destroy(true);
    }
    // 重新初始化GridStack
    grid = GridStack.init({
        float: true,
        cellHeight: 70
    }, document.querySelector('.grid-stack'));
}

关键说明 #

• 始终通过Vue的components数组控制组件渲染，GridStack仅负责布局的拖拽与位置管理，避免让GridStack直接操作Vue组件的DOM。
• 使用Vue的nextTick确保DOM更新完成后再初始化GridStack，防止GridStack找不到刚渲染的DOM元素。
• 保存数据时仅保留组件元信息（名称、props、布局位置），而非DOM的HTML内容，才能重建具备响应式能力的Vue组件。

内容的提问来源于stack exchange，提问作者sd23