How to update a textarea with vue.js based on single inputs from textarea

February 1, 2022

In VueJS I am using textarea to get input from the user and also use another textarea to show output.
Here, everything is working except I am getting multiple outputs with textarea like this.

I am using v-for in textarea as the code is perfectly working if I use inside ordered/unordered list.

Image: Multiple Textarea box while output

Code

var app = new Vue({
    el: '#app',
    data: {
        address: '',
    },
    methods: {

    },
    computed: {
        domainlist() {
            return this.address.split('\n')
        }
    }
})

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>.com.np Cover Letter Generator</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
</head>

<body>
    <div id="app">
        <section class="section">
            <div class="container">
                <div class="columns is-centered">
                    <div class="column is-half">
                        <div class="box">
                            <form>
                                <div class="field ">
                                    <label class="label is-size-5 ">Domain Name</label>
                                    <div class="control">
                                        <textarea class="textarea is-medium " placeholder="Ex: www.abc.com.np " v-model="address " required="required"></textarea>
                                    </div>
                                </div>


                            </form>
                        </div>
                    </div>
                    <div class="column is-half">
                        <div class="box">

                            <div class="field">
                                <label class="label is-size-5">Output</label>
                                <div class="control">
                                    <textarea class="textarea" placeholder="Result" v-for="address in domainlist" readonly>domain:{{address}}
                                    </textarea>

                                </div>
                            </div>

                            <div class="field">
                                <div class="control buttons is-centered ">
                                    <button class="button is-primary is-medium ">Copy</button>
                                    <button class="button is-danger is-medium ">Download</button>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </section>
    </div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
 
</body>

</html>

>Solution :

with the v-for Vue will duplicate the element for any array item.
I suggest to generate the textarea content directly in the computed property.
Here below a working example.

var app = new Vue({
    el: '#app',
    data: {
        address: '',
    },
    methods: {

    },
    computed: {
        domainlist() {
            var addreses = this.address.split('\n');
            var ret = "";
            for(var addr in addreses) {
              ret += addreses[addr] ? 'domain: '+addreses[addr]+"\n":"";
            }
            return ret;
        }
    }
})

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>.com.np Cover Letter Generator</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
</head>

<body>
    <div id="app">
        <section class="section">
            <div class="container">
                <div class="columns is-centered">
                    <div class="column is-half">
                        <div class="box">
                            <form>
                                <div class="field ">
                                    <label class="label is-size-5 ">Domain Name</label>
                                    <div class="control">
                                        <textarea class="textarea is-medium " placeholder="Ex: www.abc.com.np " v-model="address " required="required"></textarea>
                                    </div>
                                </div>


                            </form>
                        </div>
                    </div>
                    <div class="column is-half">
                        <div class="box">

                            <div class="field">
                                <label class="label is-size-5">Output</label>
                                <div class="control">
                                    <textarea class="textarea" placeholder="Result" readonly>{{domainlist}}
                                    </textarea>

                                </div>
                            </div>

                            <div class="field">
                                <div class="control buttons is-centered ">
                                    <button class="button is-primary is-medium ">Copy</button>
                                    <button class="button is-danger is-medium ">Download</button>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </section>
    </div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
 
</body>

</html>