从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个输入字段中生成一个字符串

回答

相关问题