从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]'
什么是实现这样的任务的正确方法吗?
答
计算出来的属性足以胜任这个技巧。
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>
所以你说店这就像'客户端[1] [名字]对象使用一个计算的属性https://vuejs.org/v2/guide/computed.html – thanksd
:约翰,客户端[1]姓氏]:Doe'等,并使用我将称之为每个组件的计算属性? – senty
或者您可以使用观察器手动更新它。 – kevguy