I am looking to synchronize the height of one element with another, where the content in the second element changes dynamically.
Below is an example code snippet (also available on JSFiddle):
var vm = new Vue({
el: "#root",
data: {
growingText: ''
},
watch: {
growingText: function() {
document.getElementById("square").style.height = document.getElementById("text").offsetHeight + 'px';
}
}
})
setInterval(
function() {
Vue.nextTick(function() {
vm.growingText = vm.growingText + 'hello world ';
})
},
500
)div[id="root"] {
border-style: solid;
border-width: 2px;
}
div[id="square"] {
background-color: blue;
color: white;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>
<div id="root">
<div id="square" :style="{height: h+'px'}">
x
</div>
<div id="text">
{{growingText}}
</div>
</div>In the example provided, it seems that the synchronization of heights between the two div elements is slightly off. This discrepancy remains even when using Vue.nextTick().
Is this behavior intentional, or is there a way to achieve true synchronization?
Please feel free to correct any terminology used in the title if needed.