Vue JS autosizing textarea on load

Question

Learning Vue so this may be a basic question. I have a component that renders a textarea input:

<textarea
    v-if="$attrs.type === 'textarea'"
    v-bind="$attrs"
    :value="value"
    @input="inputChange"
    :class="[
        error ? 'text-red-500' : 'text-gray-600',
        textareaAutoResized ? 'h-32' : '',
        inputClass,
    ]"
></textarea>

My inputChange method works well:

methods: {
    inputChange(evt) {
        let value = evt.target.value
        this.$emit('input', value)

        if (this.$attrs.type === 'textarea' && this.textareaAutoResized) {
            evt.target.style.height = "auto";
            let newHeight = evt.target.scrollHeight;
            evt.target.style.height = `${newHeight}px`;
        }

    },
},

But I cannot get the textarea to auto size on page load based on initial content. How do I access the element on mounted? Thanks!

    mounted() {
        if (this.$attrs.type === 'textarea' && this.textareaAutoResized) {
            this.$el.style.height = "auto";
            let newHeight = this.$el.scrollHeight;
            this.$el.style.height = `${newHeight}px`;
        }
    },

Hans Felix Ramos · Accepted Answer · 2020-05-30 09:06:43Z

2

You can use $ref on your <textarea>:

<textarea
    ref="textarea"
    v-if="$attrs.type === 'textarea'"
    v-bind="$attrs"
    :value="value"
    @input="inputChange"
    :class="[
        error ? 'text-red-500' : 'text-gray-600',
        textareaAutoResized ? 'h-32' : '',
        inputClass,
    ]"
></textarea>

and get it on mounted:

mounted() {
    if (this.$attrs.type === 'textarea' && this.textareaAutoResized) {
        this.$refs.textarea.style.height = "auto";
        let newHeight = this.$refs.textarea.scrollHeight;
        this.$refs.textarea.style.height = `${newHeight}px`;
    }
},

answered May 30, 2020 at 9:06

Hans Felix Ramos

4,4543 gold badges19 silver badges45 bronze badges

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

1 Comment

Mike Arrh Over a year ago

As many other posts demonstrate, using $ref on mounted sometimes works, sometimes not. Didn't work for me in this example. I think the questioner is making a good point: Isn't there an event handler for mounted (similar to the standard onload), so that his inputChange could be used on both?

Collectives™ on Stack Overflow

Vue JS autosizing textarea on load

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related