从 3 个输入字段中生成一个字符串答案

【问题标题】：Generating one string out of 3 input fields从 3 个输入字段中生成一个字符串
【发布时间】：2017-08-09 17:24:07
【问题描述】：

我为每个客户使用 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 函数上，将客户名字、中间名和姓氏存储为一个对象，然后像这样重新组织它：

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

完成这样的任务的正确方法是什么？

【问题讨论】：

使用计算属性vuejs.org/v2/guide/computed.html
所以你是说将它存储为像client[1][firstname]: John, client[1]lastname]: Doe 等这样的对象，并在我将调用它的每个组件上使用计算属性？
或者您可以使用观察者手动更新它。

标签： vue.js vuejs2 vue-component

【解决方案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>

【讨论】：