I'm trying to let the text area automatically adjust its height when the text value changes:
<textarea ref="textarea" v-model="message"> </textarea>
I used a watcher to monitor the component variable "message" associated with the text area. Whenever the message changes, a function will be triggered to adjust the textarea height:
watch: {
message: function(){
this.$refs.textarea.style.height="auto";
this.$refs.textarea.style.height = this.$refs.textarea.scrollHeight + 'px';
},
}
The code works well if I manually type inside the box. However, if I use methods to update the textarea variable "message", the size of the box does not update correctly.
To make it more clear, I created a fiddle project: https://jsfiddle.net/ttl66046/9nycdq60/4/ codepen here: https://codepen.io/ttl66046/pen/eYGqJWm
There are two buttons underneath the textbox. Each button is associated with a short text. Ideally, the height of the textbox should be updated based upon the button you clicked (the text you choose). What is the issue here?
add following code in css:
textarea {
width:200px;
resize:none;
}The effects of the watcher are not rendered until the next render cycle. The message watcher sets height twice (once to auto and then immediately overwrites it with scrollHeight), but the component does not re-render in between each setting.
The key is to update the height in the next render cycle with a $nextTick() callback:
export default {
watch: {
message: function() {
this.$refs.textarea.style.height = "auto";
👇
this.$nextTick(() => {
this.$refs.textarea.style.height = this.$refs.textarea.scrollHeight + 'px';
})
}
}
}
If you want to "+" row and "-" row on change TEXT use Vue3 (Composition API for me):
<textarea
id="newComm"
class="form-control"
name="comment"
placeholder="Some text you want"
cols="30"
:rows="rowsHeight"
wrap="soft"
v-model.trim="newCommText"
@input="changeRows"
:style="'resize: none; overflow: hidden; line-height: '+lineHeight+'px;'"
></textarea>
setup() {
/*--------your code here--------*/
const newCommText = ref(null)
const rowsHeightStart = ref(5)
const rowsHeight = ref(rowsHeightStart.value)
const lineHeight = ref(25)
function changeRows (event) {
rowsHeight.value = event.target.value.split("\n").length > rowsHeightStart.value ? event.target.value.split("\n").length : rowsHeightStart.value
}
return {
rowsHeight, lineHeight, newCommText,
changeRows
}