Согласуйте текст в vue. js в форму - PullRequest
Новая
       5

Согласуйте текст в vue. js в форму

0 голосов
/ 17 января 2020

Я хочу объединить тексты, которые я создал в vue, в 1 текст

ex:

текстовое поле 1 = Kode

текстовое поле 2 = Daerah

текстовое поле 3 = NomorKode

тогда у меня есть 1 текстовое поле NomorUnik , в котором значение этого текстового поля является комбинацией Kode, Daerah, NomorKode. И каждый раз, когда я делаю ввод или обновляю текстовое поле, NomorUnik автоматически редактируется и в реальном времени. Как это сделать?

КОД: 

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

Это фрагмент кода для отправки данных в 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
    },

Ответы [ 2 ]

1 голос
/ 17 января 2020

Попробуйте это: 

 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>
0 голосов
/ 17 января 2020

Самый простой способ решить эту проблему - использовать вычисленные свойства в vue.

Шаг 1 : добавить вычисляемое свойство. 

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

Шаг 2 : Добавить вычисленные вами в поле ввода 

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

Ссылка на документацию

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...