[Vue.js] 在 textarea 輸入內容時讓輸入框跟著長高

以下是在Vue中讓輸入內容時<textarea>跟著變高的範例程式碼：

<template>
  <div>
    <textarea v-model="inputText" :style="{ height: textareaHeight + 'px' }"></textarea>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputText: '',
    };
  },
  computed: {
    textareaHeight() {
      // 取得輸入框的內容高度
      const textArea = document.createElement('textarea');
      textArea.style.width = '100%';
      textArea.style.position = 'fixed';
      textArea.style.opacity = '0';
      textArea.value = this.inputText;
      document.body.appendChild(textArea);
      const height = textArea.scrollHeight;
      document.body.removeChild(textArea);

      // 回傳計算後的輸入框高度
      return height;
    },
  },
};
</script>

給有需要的參考。