Automatic resizing of textarea after loading data in Vue

Question

I have a Vue page which loads an json array from an api and displays the content in a list of multiple s by using v-for.

If you focus on one of the textarea's or change the text a function automatically resize's the textarea to fit the content.

<div v-for="post in posts">
<textarea v-model="post.body" rows="1" @focus="resizeTextarea" @keyup="resizeTextarea"></textarea>
</div>

resizeTextarea(e) {
  let area = e.target;
  area.style.overflow = 'hidden';
  area.style.height = area.scrollHeight + 'px';
}

With my limited Vue knowledge, I can't find a solution to automatically resize all textarea's after loading the data from the API. There is no @load on a textarea.

I was trying to reach the same goal with using a watcher on the data but it feels like a long workaround.

Anyone a descent solution? Thank you!

https://jsfiddle.net/oehoe83/c1b8frup/19/

Hannah · Accepted Answer · 2021-02-01 18:09:40Z

9

One solution would be to create a component for your textarea element and then resize it in the mounted() hook. Here's an example using single-file components:

// CustomTextarea.vue
<template>
  <textarea
    v-model="value"
    ref="textarea"
    rows="1"
    @focus="resize"
    @keyup="resize"
  >
  </textarea>
</template>

<script>
  export default {
    props: {
      value: {
        type: String,
        required: true,
      }
    },
    mounted() {
      this.resize();
    },
    methods: {
      resize() {
        const { textarea } = this.$refs;
        textarea.style.height = textarea.scrollHeight - 4 + 'px';
      }
    }
  }
</script>

Then in your parent:

<template>
  <div v-for="post in posts">
    <CustomTextarea v-model="post.body" />
  </div>
</template>

<script>
  import CustomTextarea from './CustomTextarea.vue';

  export default {
    components: {
      CustomTextarea,
    }
    // etc.
  }
</script>

Note: if you're using Vue 3, replace value with modelValue in the child component.

Alternatively you could use a watch like you suggested, there's nothing wrong with that. Something like this:

watch: {
  posts() {
    // Wait until the template has updated
    this.$nextTick(() => {
      [...document.querySelectorAll('textarea')].forEach(textarea => {
        this.resizeTextarea({ target: textarea });
      });
    });
  }
}

edited Feb 1, 2021 at 18:09

answered Feb 1, 2021 at 17:56

Hannah

1,1436 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Simon Dehaut Over a year ago

you should use a vuejs ref instead of [...document.querySelectorAll('textarea')] or be more precise with a custom css selector if you dont want to target textarea outside your vuejs component

Oehoe Over a year ago

Thank you! Both are nice options. In my case I only have textareas which I want to resize so it works perfect.

Matthew Knill Over a year ago

I needed to add 4px rather than minus 4px so that the scroll bar didn't show

Simon Dehaut · Accepted Answer · 2021-02-01 18:06:12Z

2

you can add the ref attribute :

<div id="app">
    <div v-for="post in posts" ref="container">
        <textarea v-model="post.body" rows="1"@focus="resizeTextarea" @keyup="resizeTextarea" ></textarea>
    </div>
</div>

and add the following code at the end of mounted() :

this.$nextTick(()=>{
    this.$refs.container.forEach( ta => {
        ta.firstChild.dispatchEvent(new Event("keyup"));
    });
});

answered Feb 1, 2021 at 18:06

Simon Dehaut

2,6871 gold badge11 silver badges16 bronze badges

2 Comments

Simon Dehaut Over a year ago

you can test it here jsfiddle.net/vtz1gwh3

Oehoe Over a year ago

This is the best solution. Thank you! However for now I use Hannah her second answer because in the real situation, the textarea is nested in a MDBTextarea a couple of levels below the v-for. I'll have to read about the refs functionality to be able to implement it in my case myself.

Collectives™ on Stack Overflow

Automatic resizing of textarea after loading data in Vue

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related