vue.js - textarea does not accept the correct size after display none

Question

Textarea style

overflow:hidden;
    outline: none;
    border: none;
    width: 100%;
    resize: inherit;

Through foreach, notes are obtained(newRecord and the text and id of the original notes are extracted from them). Don't go into too much detail, {{ }} I have Symfony brackets, not Vue.

Id starts with 1 (1,2,3...)

<template v-if="{{ newRecord.originalRecordId }} == visibleNumber && isShown">
                            <ul  class="list-group" :style="{ display: 'block' }" >
                                <li class="list-group-item"><textarea id="textarea-{{ newRecord.originalRecordId }}" readonly>{{ newRecord.originalRecordText }}</textarea></li>
                            </ul>
                        </template>
                        <template v-else>
                            <ul id="ul-{{ newRecord.originalRecordId }}" class="list-group" :style="{ display: 'none' }" >
                                <li class="list-group-item"><textarea id="textarea-{{ newRecord.originalRecordId }}" readonly>{{ newRecord.originalRecordText }}</textarea></li>
                            </ul>
                        </template>

The correct size is output via alert, but textarea takes the original (small) size, ignoring the size that was just output in alert

var app = new Vue({
            el: '#app',
            data: {
                visibleNumber: -1,
                isShown: true,
 
            },
 
            methods: {
                textareaResize: function (num) {
                    document.getElementById('textarea-'+num).style.height=document.getElementById('textarea-'+num).scrollHeight + "px";
                    alert(document.getElementById('textarea-'+num).style.height);
                },
                descriptionShown: function (num) {
 
                    if (this.visibleNumber === num) {
                        this.textareaResize(num);
                        this.isShown = !this.isShown;
 
                    } else {
                        this.textareaResize(num);
                        this.isShown = true;
                        this.visibleNumber = num;
                    }
 
                },
            },
        })

Answer 1

You can try:

<textarea id="textarea-{{ newRecord.originalRecordId }}" readonly rows="8">{{ newRecord.originalRecordText }}</textarea>