[Vuejs]-Concat text in vue.js into form

by

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/vue@2.6.11"></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>
👤Hardik Raval

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

👤Qonvex620

Leave a comment