Using a static template with a Vue.js instance is straightforward. The firstPlaceholder content gets replaced by the staticTemplate, and the text property renders correctly.
However, creating a dynamic template poses rendering issues. The secondPlaceholder is missing, potentially due to timing problems.
How can I adjust my code to ensure the correct rendering of the secondPlaceholder using the dynamicTemplate?
<!doctype html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<template id = "staticTemplate">
<div>{{text}}</div>
</template>
<div id ="firstPlaceholder"></div>
<div id ="secondPlaceholder"></div>
<script>
var dynamicTemplate = document.createElement('template');
dynamicTemplate.id = 'dynamicTemplate';
var div = document.createElement('div');
div.innerText = '{{text}}';
dynamicTemplate.appendChild(div);
var staticTemplate = document.getElementById('staticTemplate');
document.body.insertBefore(dynamicTemplate, staticTemplate);
new Vue({
el: '#firstPlaceholder',
template: '#staticTemplate',
data: {
text: 'My first text'
}
});
new Vue({
el: '#secondPlaceholder',
template: '#dynamicTemplate',
data: {
text: 'My second text'
}
});
</script>
</body>
</html>For more information, see:
How to target custom element (native web component) in vue.js?