[Vuejs]-Vue.js Textarea resize on keyDown event, how to get style properties?

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

Leave a comment