title: Vue.js Textarea resize on keyDown event, how to get style properties?
body: <p>I'd like to replicate <a href="https://raw.githubusercontent.com/jackmoore/autosize/master/dist/autosize.js" rel="nofollow noreferrer">autosize library</a> for Vue.js Textarea component. And I found that I cannot obtain values of several properties: <strong>boxSizing</strong>, <strong>paddingTop</strong>, <strong>paddingBottom</strong>, <strong>borderTopWidth</strong>, <strong>borderBottomWidth</strong> to calculate <strong>heightOffset</strong>:</p>
  
  <pre><code>const style = window.getComputedStyle(this.$refs.textarea, null);
  if (style.boxSizing === 'content-box') {
    heightOffset = -(parseFloat(style.paddingTop + parseFloat(style.paddingBottom));
  } else {
    heightOffset = parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
  }
  </code></pre>
  
  <p>Template:</p>
  
  <pre><code>&lt;textarea 
    class="answer" 
    ref="textarea"
    v-bind:placeholder="placeholder" 
    v-on:keydown="setHeight"
    v-bind:style="{ height: areaHeight + 'px' }"
  &gt;
  &lt;/textarea&gt;
  </code></pre>
  
  <p>In Component:</p>
  
  <pre><code>data: function () {
    return {
      placeholder: "Your answer",
        areaHeight: 24
    }
  },
  methods: {
    setHeight: function(e) {
      var ta = this.$refs.textarea;
  
      console.log("ta.paddingTop: " + ta.paddingTop); //undefined
      console.log("ta.style.paddingTop: " + ta.style.paddingTop); //""
      console.log("ta.paddingBottom: " + ta.paddingBottom); //undefined
      console.log("ta.style.paddingBottom: " + ta.style.paddingBottom); //""
  
      console.log("ta.borderTopWidth: " + ta.borderTopWidth); //undefined
      console.log("ta.style.borderTopWidth: " + ta.style.borderTopWidth); //""
      console.log("ta.borderBottomWidth: " + ta.borderBottomWidth); //undefined
      console.log("ta.style.borderBottomWidth: " + ta.style.borderBottomWidth); //""
  
      this.areaHeight = this.$refs.textarea.scrollHeight;
  
      if (e.keyCode === 13) {
        this.areaHeight += 24;
      }
      if (e.keyCode === 8) {
        this.areaHeight -= 24;
        if(this.areaHeight &lt;= 0) this.areaHeight = 24;
      }
  }
  </code></pre>