如何在Vue.js的v-for循环中更新多个字段？

嘿，我看你已经搞定了用户列表的新增和删除功能，现在卡在循环内的字段更新上了对吧？其实你离解决问题只差一步——你的代码里已经用了v-model，但还没完全利用它的双向绑定能力！

问题根源 #

你当前的updateForm方法里用了静态值'john doe'和'0000'，但实际上<input type="text" v-model="user.name">和<input type="text" v-model="user.phone">已经把输入框和users数组里的对应数据实时双向绑定了。也就是说，用户在输入框里输入内容的时候，this.users[key].name和this.users[key].phone已经自动更新了，根本不需要手动赋值静态值！

解决方案 #

你只需要修改updateForm方法，直接使用users数组里已经更新后的真实值即可。如果需要做额外操作（比如验证、提交到后端），也可以在这里处理：

修改后的JavaScript代码

new Vue({
  el: "#app",
  data: {
    users: [{ name: 'test', phone: '1234' }, ],
    form: { name: '', phone: '' },
    show_link: true,
    IsOn: false,
  },
  methods: {
    addRow: function() {
      this.IsOn = true 
      this.show_link = false 
    },
    removeSelected(index) {
      this.users.splice(index, 1);
    },
    saveForm() {
      this.users.push({ 
        name: this.form.name, 
        phone: this.form.phone 
      })
      this.form.name = '';
      this.form.phone = '';
      // 保存后恢复添加链接，优化用户体验
      this.IsOn = false;
      this.show_link = true;
    },
    updateForm(key) {
      // 直接获取已经通过v-model更新后的用户数据
      const currentUser = this.users[key];
      console.log('当前更新后的用户信息:', currentUser);
      // 这里可以添加你的额外逻辑，比如提交到后端、弹出提示等
      alert(`已更新用户：${currentUser.name}，手机号：${currentUser.phone}`);
    }
  }
})

优化后的HTML代码（修正一个小细节）

注意你新增表单里的第二个input的name属性重复了，我帮你改成了phone，更规范：

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<div id="app">
  <h2>Todos:</h2>
  <ol>
    <li v-for="(user,key) in users">
      <label>
        <input type="text" v-model="user.name">
        <input type="text" v-model="user.phone">
        <input type="button" value="Update" @click="updateForm(key)">
        <input type="button" value="Delete" @click="removeSelected(key)">
      </label>
    </li>
  </ol>
  <a v-if="show_link" @click="addRow">Add Another</a>
  <div v-if="IsOn">
    <hr />
    <input type="text" name="name" v-model="form.name">
    <input type="text" name="phone" v-model="form.phone"> <!-- 修正重复的name属性 -->
    <input type="button" value="Save" @click="saveForm">
  </div>
</div>

额外优化建议 #

• 如果不需要额外的更新逻辑（比如提示、提交后端），其实这个Update按钮都可以去掉，因为v-model已经实时同步了数据。
• 保存新增用户后隐藏表单、恢复添加链接，能让操作流程更顺畅。

内容的提问来源于stack exchange，提问作者Khirad Zahra