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;
}
},
},
})
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…