3つの入力フィールドから1つの文字列を生成する

Question

各クライアントにv-forを使って作成した3つの入力フィールド（firstname、midname、lastname）があります。クライアント名が変更されるたびに、オブジェクトの名前の更新バージョンを文字列として生成したい。

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

これは、私が考える方法ですが、indexはクライアント数です。しかし、それはそれを達成するための正しい方法ではないと思った。どのように私はそれをオブジェクトとしてnameUpdated機能、店舗クライアントFIR​​STNAME、midnameとlastnameにあったし、それが好きな再編成について考えた：

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

次のようにタスクを達成するための正しい方法は何ですか？

Answer 1

計算されたプロパティは、トリックを行うのに十分です。

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>