vue.js - 显示后 textarea 不接受正确的大小 none

Question

文本区域样式

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

通过foreach，得到notes（newRecord，从中提取出原始notes的text和id）。不要讲太多细节，{{ }} 我有 Symfony 括号，而不是 Vue。

ID 以 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>

通过警报输出正确的大小，但 textarea 采用原始（小）大小，忽略刚刚在警报中输出的大小

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;
                    }
 
                },
            },
        })

标签： vue.jssymfony

Answer 1

你可以试试：

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