Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
4.0k views
in Technique[技术] by (71.8m points)

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

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

You can try:

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

1.4m articles

1.4m replys

5 comments

57.0k users

...