从 ajax html 响应中附加多个 Vue2 组件无效

Question

我正在尝试使用 jquery ajax 附加多个 vuejs 组件，但它不起作用。一切正常，直到响应 returns 多个组件，或组件中的组件。

代码如下：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<div id="app">
</div>

<script type="text/x-template" id="template-1">
    <div>
     <h1>Template 1 {{param}}</h1>
    </div>
</script>

<script type="text/x-template" id="template-2">
    <div>
     <h1>Template 2 {{param}}</h1>
    </div>
</script>


<script>
    Vue.component('template-1', {
         template: '#template-1',
         props: ['param']
       });

       Vue.component('template-2', {
         template: '#template-2',
         props: ['param']
       });

       const vm = new Vue({
           el: '#app'
       });
</script>

<script>

    function loadMore(){
        $.get('/home/test', function (response) {
            var MyComponent = Vue.extend({
                template: response
            });

          
            var compiled = new MyComponent().$mount();
            $('#app').append(compiled.$el);
        });
    }

   loadMore();

</script>

如果以下响应来自 ajax，它会工作，并呈现一个组件：

<template-1 param="Test"></template-1>

如果来自 ajax 的以下响应 returns，它只呈现第一个组件：

<template-1 param="Test"></template-1>
<template-2 param="Test"></template-2>

如果来自 ajax 的以下响应 returns，它会呈现两个组件：

<div>
    <template-1 param="Test"></template-1>
    <template-2 param="Test"></template-2>
</div>

如果来自 ajax 的以下响应 returns，它只呈现父组件：

<template-1 param="Test">
    <template-2 param="Test"></template-2>
</template-1>

有没有办法在不知道从服务器返回多少组件的情况下使这项工作始终有效？

Answer 1

由于您告诉 Vue 您的 response.data 应该是 el 属性的值，它会在其中查看并渲染所有已注册并因此已知的组件。

在您的情况下，您应该始终将响应包装在另一个 HTML 元素中，该元素应该是 el 属性.

的值

注意：如果父组件（这里是您的模板 1）已经注册了第二个本身，则只能呈现其他 Vue 元素内的 Vue 元素。意味着当 template-1 被渲染时，它里面的所有东西都将被删除，除了它正在使用 slots.

如果您想使用插槽，可以帮助您。

否则您可以使用 render 函数并构建您自己的动态渲染内容。

从 ajax html 响应中附加多个 Vue2 组件无效

Appending multiple Vue2 components from ajax html response not working

javascript

ajax

vue.js

vue-component

vuejs2