Generieren einer Zeichenfolge aus 3 Eingabefeldern

Question

Ich habe 3 Eingabefelder (Vorname, Midname, Nachname), die ich mit V-für jeden Client erstellt habe. Jedes Mal, wenn sich der Clientname ändert, möchte ich eine aktualisierte Version des Namens in einem Objekt als Zeichenfolge generieren.

<input :data-index="index" data-field="first-name" @keyup="nameUpdated"> 
<input :data-index="index" data-field="middle-name" @keyup="nameUpdated"> 
<input :data-index="index" data-field="last-name" @keyup="nameUpdated"> 

Dies ist die Methode, die ich von, wo Index die Client-Anzahl ist. Aber dann dachte ich, dass das nicht der richtige Weg ist. Wie ich darüber nachdachte auf nameUpdated Funktion, speichern Client Vorname, midname und Nachname als Objekt war und dann reorganisieren es mag:

client[1][first-name]' + ' ' + client[1][middle-name]' + ' ' + client[1][last-name]'

Was ist der richtige Weg, um eine solche Aufgabe, dies zu erreichen?

Answer 1

Eine berechnete Eigenschaft ist mehr als genug, um den Trick zu machen.

const app = new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    clientList: [{ 
 
     firstName: 'John', 
 
     midName: '.', 
 
     lastName: 'Doe' 
 
    }] 
 
    }, 
 
    computed: { 
 
    fullList() { 
 
     return this.clientList 
 
     .map((client) => `${client.firstName} ${client.midName} ${client.lastName}`) 
 
    } 
 
    }, 
 
    methods: { 
 
    addList(){ 
 
     this.clientList.push({ 
 
     firstName: '', 
 
     midName: '', 
 
     lastName: '' 
 
     }); 
 
    } 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script> 
 
<div id="app"> 
 
    Client List 
 
    <button v-on:click="addList()">Add</button> 
 
    <table> 
 
    <th>First Name</th> 
 
    <th>Middle Name</th> 
 
    <th>Last Name</th> 
 
    <tr v-for="client in clientList"> 
 
     <td><input type="text" v-model="client.firstName"></td> 
 
     <td><input type="text" v-model="client.midName"></td> 
 
     <td><input type="text" v-model="client.lastName"></td> 
 
    </tr> 
 
    </table> 
 
    <div> 
 
    <div>Result</div> 
 
    <div>{{fullList}}</div> 
 
    </div> 
 
</div>