Vue.js内存CRUD开发：添加选择按钮并实现数据更新编辑功能

针对你的需求，我们需要解决两个核心问题：点击「Selecionar」按钮将数据填充到表单，以及实现正确的更新逻辑。以下是具体修改方案：

关键修改点 #

1. 新增编辑状态标记 #

在Vue实例的data中添加editId，用于记录当前正在编辑的联系人ID：

data: {
  // ... 原有数据
  editId: null // 新增：标记当前编辑的ID
}

2. 优化「Selecionar」方法 #

使用Array.find()替代filter()（因为ID唯一，find直接返回目标对象），同时记录editId：

select: function (id) {
  const contact = this.contacts.find(contact => contact.id === id);
  // 填充表单
  this.form.name = contact.name;
  this.form.age = contact.age;
  this.form.phone = contact.phone;
  this.form.gender = contact.gender;
  this.form.registerdate = contact.registerdate;
  // 记录编辑ID
  this.editId = id;
}

3. 完善「Atualizar」方法 #

根据editId找到对应的联系人，更新其属性，完成后重置表单和编辑状态：

update: function () {
  if (!this.editId) {
    this.classAlert = 'alert alert-warning';
    this.messageAlert = "Por favor, selecione um contato para editar";
    this.showMessage = true;
    setTimeout(() => this.showMessage = false, 3000);
    return;
  }

  const contactIndex = this.contacts.findIndex(item => item.id === this.editId);
  if (contactIndex !== -1) {
    // 更新联系人数据
    this.contacts[contactIndex] = {
      ...this.contacts[contactIndex],
      ...this.form
    };

    this.classAlert = 'alert alert-primary';
    this.messageAlert = "Atualizado com sucesso";
    this.showMessage = true;
    setTimeout(() => this.showMessage = false, 3000);

    // 重置表单和编辑状态
    this.resetForm();
  }
}

4. 优化「Salvar」方法（区分新增/编辑） #

如果当前处于编辑状态（editId存在），自动调用更新方法；否则执行新增：

save: function () {
  if (this.editId) {
    this.update();
    return;
  }

  // 原有新增逻辑
  this.contacts.push({
    id: this.currentId++,
    name: this.form.name,
    age: this.form.age,
    phone: this.form.phone,
    gender: this.form.gender,
    registerdate: this.form.registerdate
  });

  this.classAlert = 'alert alert-success';
  this.messageAlert = "Salvo Com sucesso";
  this.showMessage = true;
  setTimeout(() => this.showMessage = false, 3000);

  this.resetForm();
}

5. 新增表单重置方法 #

添加一个通用的重置方法，用于操作后清空表单和编辑状态：

resetForm: function () {
  this.form = {
    name: '',
    age: 0,
    phone: '',
    gender: '',
    registerdate: ''
  };
  this.editId = null;
}

完整修改后的代码 #

<body>
  <div id="app">
    <div class="container">
      <h1>Formulário de Cadastro v.Vue</h1>
      <form class="row">
        <div class="col-sm-2">
          <label>Nome:</label>
          <input type="text" placeholder="Nome" v-model="form.name" class="form-control">
        </div>
        <div class="col-sm-2">
          <label>Idade:</label>
          <input type="number" placeholder="Idade" v-model="form.age" class="form-control">
        </div>
        <div class="col-sm-2">
          <label>Telefone:</label>
          <input type="tel" placeholder="Telefone" v-model="form.phone" class="form-control">
        </div>
        <div class="col-sm-2">
          <label>Gênero:</label>
          <select class="form-select form-control" v-model="form.gender">
            <option>Masculino</option>
            <option>Feminino</option>
          </select>
        </div>
        <div class="col-sm-2">
          <label>Data de Cadastro:</label>
          <input type="date" v-model="form.registerdate" class="form-control">
        </div>
      </form>
      <br />
      <div>
        <input type="button" value="Salvar" v-on:click="save" class="btn btn-sm btn-success" />
        <input type="button" value="Atualizar" v-on:click="update" class="btn btn-sm btn-primary" />
        <input type="button" value="Limpar" v-on:click="resetForm" class="btn btn-sm btn-secondary" /> <!-- 新增重置按钮 -->
      </div>
      <br />
      <div class="container-fluid">
        <table class="table table-sm table-bordered" v-if="contacts.length > 0">
          <tr>
            <th>ID</th>
            <th>Nome</th>
            <th>Idade</th>
            <th>Telefone</th>
            <th>Gênero</th>
            <th>Data de Cadastro</th>
            <th>Opções</th>
          </tr>
          <tr v-for="contact in contacts" :key="contact.id"> <!-- 新增key属性，符合Vue2规范 -->
            <td>{{contact.id}}</td>
            <td>{{contact.name}}</td>
            <td>{{contact.age}}</td>
            <td>{{contact.phone}}</td>
            <td>{{contact.gender}}</td>
            <td>{{contact.registerdate}}</td>
            <td>
              <input type="button" value="Excluir" class="btn btn-sm btn-danger" v-on:click="remove(contact.id)" />
              <input type="button" value="Selecionar" class="btn btn-sm btn-primary" v-on:click="select(contact.id)" />
            </td>
          </tr>
        </table>
        <!-- 将提示框移出table，避免HTML结构错误 -->
        <div :class="classAlert" role="alert" v-if="showMessage">
          {{messageAlert}}
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    var app = new Vue({
      el: "#app",
      data: {
        classAlert: '',
        messageAlert: '',
        showMessage: false,
        inputName: '',
        currentCount: 0,
        currentId: 1,
        editId: null, // 新增编辑ID标记
        form: {
          name: '',
          age: 0,
          phone: '',
          gender: '',
          registerdate: ''
        },
        contacts: []
      },
      methods: {
        incrementCount: function () {
          this.currentCount++;
        },
        save: function () {
          if (this.editId) {
            this.update();
            return;
          }

          this.contacts.push({
            id: this.currentId++,
            name: this.form.name,
            age: this.form.age,
            phone: this.form.phone,
            gender: this.form.gender,
            registerdate: this.form.registerdate
          });

          this.classAlert = 'alert alert-success';
          this.messageAlert = "Salvo Com sucesso";
          this.showMessage = true;
          setTimeout(() => this.showMessage = false, 3000);

          this.resetForm();
        },
        remove: function (id) {
          this.contacts = this.contacts.filter(p => p.id != id);

          this.classAlert = 'alert alert-danger'
          this.messageAlert = "Excluido Com sucesso";
          this.showMessage = true;
          setTimeout(() => this.showMessage = false, 3000);
        },
        select: function (id) {
          const contact = this.contacts.find(contact => contact.id === id);
          this.form.name = contact.name;
          this.form.age = contact.age;
          this.form.phone = contact.phone;
          this.form.gender = contact.gender;
          this.form.registerdate = contact.registerdate;
          this.editId = id;
        },
        update: function () {
          if (!this.editId) {
            this.classAlert = 'alert alert-warning';
            this.messageAlert = "Por favor, selecione um contato para editar";
            this.showMessage = true;
            setTimeout(() => this.showMessage = false, 3000);
            return;
          }

          const contactIndex = this.contacts.findIndex(item => item.id === this.editId);
          if (contactIndex !== -1) {
            this.contacts[contactIndex] = {
              ...this.contacts[contactIndex],
              ...this.form
            };

            this.classAlert = 'alert alert-primary';
            this.messageAlert = "Atualizado com sucesso";
            this.showMessage = true;
            setTimeout(() => this.showMessage = false, 3000);

            this.resetForm();
          }
        },
        resetForm: function () {
          this.form = {
            name: '',
            age: 0,
            phone: '',
            gender: '',
            registerdate: ''
          };
          this.editId = null;
        }
      }
    });
  </script>
</body>

额外优化说明 #

• 给v-for添加了:key属性，符合Vue 2的列表渲染规范，避免性能问题
• 将提示框从<table>内部移到外部，修正了HTML结构错误（table内只能包含tr、thead等元素）
• 新增了「Limpar」按钮，方便手动重置表单
• 在update方法中添加了未选择联系人时的提示逻辑

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