vue.js テキストエリア伸ばす

テキストエリアを文字数に応じて自動で伸ばす。
ちゃんとコンポーネントも読み出す。

今回は element ui を使う。
一般的なテキストエリアとは違うので注意。

top.vue

<el-form-item label="無料占いの内容" prop="message">
    <TextareaResizeComponent
            v-model="form.message"
            placeholder="ここにサンプル"
            name="message"
    ></TextareaResizeComponent>
    <!--<el-input type="textarea" v-model="form.message" :rows=5></el-input>-->
</el-form-item>


・・・略
<script>
    import TextareaResizeComponent from "./TextareaResizeComponent";

    export default {
        components: {TextareaResizeComponent},
        data() {
                form: {
                    message:''
                },
</script>

テキストエリアリサイズコンポーネント

TextareaResizeComponent.vue

<template>

<el-input
        :name="name"
        :value="value"
        :placeholder="placeholder"
        :rows="rows"
        type="textarea"
        @input="updateValue"
></el-input>


</template>

<script>
    export default {
        name: "TextareaResizeComponent",
        props: {
            value: { type: String, require: true },
            name: { type: String, require: true },
            placeholder: { type: String, require: false },
            cols: { type: Number, require: false }
        },
        computed: {
            rows() {
                var num = this.value.split('\n').length;
                return (num > 10) ? num : 10;
            }
        },
        methods: {
            updateValue(e) {
                //普通のテキストエリアと違うので注意
                this.$emit("input", e);
            }
        }
    };
</script>