0๐
I asked this question on Vue Forum and based on the advice found solution:
(....)
data: function () {
return {
placeholder: "Your answer",
areaHeight: 24,
style: null
}
},
// https://vuejs.org/v2/api/#mounted
mounted: function () {
const self = this;
self.$nextTick(function () {
// Code that will run only after the
// entire view has been rendered
const style = window.getComputedStyle(this.$refs.textarea, null);
self.style = style;
})
},
methods: {
setHeight: function(e) {
//https://github.com/jackmoore/autosize/blob/master/src/autosize.js
let heightOffset = null;
var ta = this.$refs.textarea
const style = this.style;
if (style.boxSizing === 'content-box') {
heightOffset = -(parseFloat(style.paddingTop)+parseFloat(style.paddingBottom));
} else {
heightOffset = parseFloat(style.borderTopWidth)+parseFloat(style.borderBottomWidth);
}
// Fix when a textarea is not on document body and heightOffset is Not a Number
if ( isNaN(heightOffset) ) heightOffset = 0;
//ta.style.height = (ta.scrollHeight+heightOffset)+'px';
//Vue Async Update Queue:
this.$nextTick(function() {
this.areaHeight = this.$refs.textarea.scrollHeight + heightOffset;
});
/*
if (e.keyCode === 13) {
this.areaHeight += 24;
}
if (e.keyCode === 8) {
this.areaHeight -= 24;
if(this.areaHeight <= 0) this.areaHeight = 24;
}
*/
//console.log(this.areaHeight);
}
}
- [Vuejs]-Vs-select from vuesax not working and duplicate root node in vuejs
- [Vuejs]-Vuejs Test Utils with Jest โ stuck testing async service
Source:stackexchange.com