I'm facing an issue with appending multiple vuejs components using jquery ajax. Everything seems to be in order until the response includes more than one component, or a component within another component.
Here is the code snippet:
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d6a0a3b396e4f8e0f8e7e2">[email protected]</a>"></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>
If the following response comes from ajax, it works and renders one component:
<template-1 param="Test"></template-1>
If the following response is returned from ajax, only the first component is rendered:
<template-1 param="Test"></template-1>
<template-2 param="Test"></template-2>
If this response is received from ajax, both components are rendered:
<div>
<template-1 param="Test"></template-1>
<template-2 param="Test"></template-2>
</div>
In case this response is returned from ajax, only the parent component is rendered:
<template-1 param="Test">
<template-2 param="Test"></template-2>
</template-1>
Is there a way to ensure that this setup works every time without having prior knowledge of the number of components fetched from the server?