Concat text in vue.js into form

Question

I want to combine the texts that I created in vue into 1 text

ex:

text field 1 = Kode

text field 2 = Daerah

text field 3 = NomorKode

then I have 1 text field NomorUnik, which is the value of this text field is combination of Kode, Daerah, NomorKode. And everytime I do input or update the text field, NomorUnik is automatically edited too in realtime. How to do that?

CODE:

                    <v-col cols="12">
                        <v-text-field label="Kode*" v-model="form.Kode" required></v-text-field>
                    </v-col>
                    <v-col cols="12">
                        <v-text-field label="Daerah*" v-model="form.Daerah" required>
                        </v-text-field>
                    </v-col>
                    <v-col cols="12">
                        <v-text-field label="NomorKode*" v-model="form.NomorKode" required>
                        </v-text-field>
                    </v-col>
                    <v-col cols="12">
                        <v-text-field label="KodeUnik*" v-model="form.KodeUnik" required>
                        </v-text-field>
                    </v-col>

this is a piece of code to send data into api

updateData() {
        this.listperkiraan.append('jenisperkiraan', this.form.JenisPerkiraan);
        this.listperkiraan.append('kodeunik', this.form.KodeUnik);
        this.listperkiraan.append('kode', this.form.Kode);
        this.listperkiraan.append('daerah', this.form.Daerah);
        this.listperkiraan.append('nomorkode', this.form.NomorKode);
        var uri = this.$apiUrl + 'listperkiraan/' + this.KodeUnik;
        .................
        ..........

    editHandler(item) {
        this.typeInput = 'edit';
        this.statusUpdate = false;
        this.dialog = true;
        this.form.Kode = item.Kode;
        this.form.Daerah = item.Daerah;
        this.form.NomorKode = item.NomorKode;
        this.form.KodeUnik = item.KodeUnik;
        this.updatedId = item.KodeUnik
    },

Hardik Raval · Accepted Answer · 2020-01-17 07:27:19Z

1

Try this:

 new Vue({
    el:"#app",
    data: { 
        form: {
            Kode:'',
            Daerah:'',
            NomorKode:'',
            KodeUnik:''
        }    
    },
    methods: {
        updateText(){
            this.form.KodeUnik = this.form.Kode + ' ' + this.form.Daerah + ' ' + this.form.NomorKode;
        }
    }
});

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
</head>
<body>
    <div id="app">
      <input type="text" v-model="form.Kode" @keyup="updateText" />   
      <input type="text" v-model="form.Daerah" @keyup="updateText"/>   
      <input type="text" v-model="form.NomorKode" @keyup="updateText"/>
      <br><br>
      KodeUnik: <input type="text" v-model="form.KodeUnik" />
    </div>        
</body>
</html>

edited Jan 17, 2020 at 7:27

answered Jan 17, 2020 at 7:18

Hardik Raval

3,6911 gold badge30 silver badges31 bronze badges

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

Comments

tony19 · Accepted Answer · 2022-07-16 03:42:24Z

0

The easiest way to solve this is by using computed properties in vue.

Step 1: Add a computed property.

computed: {
    NomorUnik() {
       return `${this.form.Kode} ${this.form.Daerah} ${this.form.NomorKode}`;
    }
}

Step 2: Add the computed you created in your input field

<v-text-field label="KodeUnik*" :value="NomorUnik" required>

Link to documentation

edited Jul 16, 2022 at 3:42

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Jan 17, 2020 at 6:31

Qonvex620

3,9801 gold badge12 silver badges17 bronze badges

3 Comments

tbhaxor Over a year ago

Why not using two-way binding? v-model

ryanderon Over a year ago

it shows this form.kodeunik function () { [native code] }

Qonvex620 Over a year ago

Yes. Native code error because you have something missing on your code. Check this stackoverflow.com/questions/49517563/…

Collectives™ on Stack Overflow

Concat text in vue.js into form

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related