我无法从 ajax 结果加载 vue 动态组件

Question

我正在用一个 symfony 项目学习 vue，但遇到了问题。

我正在尝试使用 ajax 调用的结果加载动态组件以进行滚动分页，但无法使其正常工作。

这是我的代码：

Gamecard.vue

<script>
  export default {
    name: 'gamecard',
    props: ['name', 'description', 'tourneyscount'],
    data() {
      return {

      }
    }
  }
</script>

game-card.js

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

new Vue({
    el: '#game-card',
    components: {
        Gamecard,
        'gamecard': () => import('./../../components/Gamecard')
    }
})

在这种情况下，Gamecard 用于初始组件，'gamecard': () ... 用于动态组件

game-cards-container.html.twig 这有一个充卡循环

{% for game in games %}
    {% include 'partials/cards/game-card.html.twig' %}
{% endfor %}

game-card.html.twig

<gamecard
    name="{{ game.getName() }}"
    description="{{ game.getDescription() }}"
    tourneyscount="{{ (game.getTourneys() | length > 0) ? game.getTourneys() | length : '0' }} {{ 'active tourneys' }}"
></gamecard>

我的控制器响应

 if ($request->isXMLHttpRequest()) {
            return new JsonResponse(
                [
                    'code' => Response::HTTP_OK,
                    'cards' => $this->render('partials/containers/game-cards-container.html.twig', [
                        'async' => true,
                        'games' => $gameList
                    ])->getContent()
                ]
            );
        }

        return $this->render('home/index.html.twig', [
            'games' => $gameList
        ]);

和 ajax 调用：

const url = window.location.hostname + '/' + page;

    fetch('?page=' + page, {
        headers: {
            "X-Requested-With": "XMLHttpRequest"
        }
    })
        .then(response => response.json())
        .then(function (response) {
            if (response.code === 200) {
                console.log(response.cards);
                document.getElementById('game-card').innerHTML += response.cards
                canLoad = true;
            } else {
                canLoad = false;
            }
        });

有人可以帮助我吗？

谢谢！

Answer 1

我找到了解决方案。它可能不是最佳的，但它确实有效。

我看到vue在挂载之后并没有渲染ajax添加的新组件，所以我想到的解决方案是在ajax请求后重新创建组件

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

function createGameCards() {
     new Vue({
        el: '#game-card',
        components: {
            Gamecard
        },
    });
}

createGameCards();

export {createGameCards}

这在我的 ajax 请求中

fetch('?page=' + page, {
        headers: {
            "X-Requested-With": "XMLHttpRequest"
        }
    })
        .then(response => response.json())
        .then(function (response) {
            if (response.code === 200) {
                document.getElementById('game-card').innerHTML += response.cards.trim();
                createGameCards();
                canLoad = true;
            } else {
                canLoad = false;
            }
        });