Question

我有3个输入字段（firstname，midname，lastname），我使用v-for为每个客户端创建。每次客户端名称更改时，我都希望在对象中生成名称的更新版本作为字符串。

<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函数上，将客户端firstname，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>

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

1 个答案: