Symfony项目中Twig循环调用Vue组件仅渲染1个元素求助

• Vue 实例仅挂载到了 ID 为 game-card 的单个 DOM 节点上，只有该节点内部的内容会被 Vue 解析处理。你在 Twig 中把 gamecard 组件的循环写在了挂载节点外部，Vue 无法识别这些自定义标签，会被浏览器直接当做无效标签忽略。
• 当前 Vue 实例的 render 函数仅返回了单个 Gamecard 组件实例，没有批量生成多组件的循环逻辑，自然只能渲染出1个卡片。

方案1：将数据传递到 Vue 内部做循环渲染（推荐） #

这种方案更符合 Vue 的使用逻辑，维护成本更低：

1. 调整 Twig 模板，仅保留单个挂载容器，同时把 games 数组序列化后传给前端：

<div id="game-card" data-games="{{ games|json_encode }}"></div>

2. 修改 game-card.js 逻辑，解析数据后循环生成组件：

import Vue from 'vue';
import Gamecard from './../components/Gamecard'
    
new Vue({
    render(h) {
        // 解析 Twig 传递的游戏列表数据
        const games = JSON.parse(this.$el.dataset.games)
        // 循环生成多个 Gamecard 组件
        return h('div', {}, games.map(game => {
            return h(Gamecard, {
                props: {
                    cardId: `card-${game.id}`
                }
            })
        }))
    }
}).$mount('#game-card')

方案2：在 Twig 中循环生成独立挂载节点 #

如果你更倾向于在 Twig 层控制卡片生成，可以为每个卡片创建独立的挂载容器：

1. 修改 Twig 模板逻辑：

{% for game in games %}
    <div class="game-card" data-card-id="card-{{ game.getId() }}"></div>
{% endfor %}

2. 修改 game-card.js 批量挂载实例：

import Vue from 'vue';
import Gamecard from './../components/Gamecard'

// 遍历所有挂载节点逐个初始化 Vue 实例
document.querySelectorAll('.game-card').forEach(el => {
    new Vue({
        render(h) {
            return h(Gamecard, {
                props: {
                    cardId: el.dataset.cardId
                }
            })
        }
    }).$mount(el)
})

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