CODEWITHSUNDEEP
laravelvue.jsweb
ryanderon
ryanderon

Reputation: 61

Concat text in vue.js into form

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
    },

Upvotes: 0

Views: 1032

Answers (2)

Qonvex620
Qonvex620

Reputation: 3972

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

Upvotes: 0

Hardik Raval
Hardik Raval

Reputation: 3641

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>

Upvotes: 1

Related Questions