從3個輸入字段中生成一個字符串

我有3個使用v-for爲每個客戶端創建的輸入字段（名字，中間名，姓氏）。每當客戶端名稱發生更改時，我都想以字符串的形式在對象中生成名稱的更新版本。從3個輸入字段中生成一個字符串

<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功能，存儲客戶姓名，midname和姓氏作爲一個對象，然後重新組織，如：

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

什麼是實現這樣的任務的正確方法嗎？

來源

2017-08-09 senty

所以你說店這就像'客戶端[1] [名字]對象使用一個計算的屬性https://vuejs.org/v2/guide/computed.html – thanksd

：約翰，客戶端[1]姓氏]：Doe'等，並使用我將稱之爲每個組件的計算屬性？ – senty

或者您可以使用觀察器手動更新它。 – kevguy

計算出來的屬性足以勝任這個技巧。

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>

來源

2017-08-09 18:21:02 kevguy

從3個輸入字段中生成一個字符串

回答

相關問題