Vue.js CRUD中PUT方法不生效 编辑操作新增行而非更新行

当前触发编辑方法后会在表格中新增一行，无法实现编辑已有行的预期功能。

相关代码 #

template模板代码 #

<!-- DIALOG PARA EDITAR USUARIO -->
<v-dialog v-model="editarDialog">
  <v-card>
    <v-card-title>
      <span class="text-h5">Editar Pessoa</span>
    </v-card-title>

    <v-card-text>
      <v-container>
        <v-row>
          <v-col cols="12" sm="6" md="4">
            <v-text-field
              v-model="pessoa.nome"
              label="Pessoa*"
              required
            ></v-text-field>
          </v-col>
          <v-col cols="12" sm="6" md="4">
            <v-text-field v-model="pessoa.idade" label="Idade*"></v-text-field>
          </v-col>
        </v-row>
      </v-container>
    </v-card-text>
    <v-card-actions>
      <v-spacer></v-spacer>
      <v-btn color="blue darken-1" text @click="editarDialog = false">
        Fechar
      </v-btn>
      <v-btn color="blue darken-1" text @click="editarPessoa"> Salvar </v-btn>
    </v-card-actions></v-card
  ></v-dialog
>

script脚本代码 #

function botaoEditarPessoa(item) {
  state.pessoa = Object.assign({}, item);
  state.dialog = true;
}

async function editarPessoa() {
  try {
    const res = await axios({
      url: "http://localhost:3000/update",
      method: "put",
      data: state.pessoa,
    });
    state.pessoa = res.data;
    await getData();
    state.dialog = false;
  } catch (error) {
    console.log(error);
  }
}

错误原因排查 #

代码中共有3处核心问题导致编辑功能失效、触发新增行：

• 弹窗控制变量不匹配：模板中弹窗绑定的开关变量是editarDialog，但脚本中打开、关闭弹窗操作的变量是state.dialog，两个变量完全独立，会导致弹窗状态逻辑混乱，容易误触新增逻辑。
• 编辑后数据赋值逻辑错误：接口返回更新后的单条数据res.data后，直接将其赋值给全局的state.pessoa，后续调用getData()拉取全量列表时，如果列表数据初始化逻辑没有做存在性判断，这条单条数据会被识别为新增项插入表格，出现“点编辑反而加一行”的现象。
• 行数据拷贝存在引用风险：使用Object.assign({}, item)做的是浅拷贝，如果行数据item存在嵌套属性，拷贝后的对象依然和原行数据存在引用关联，弹窗内编辑表单时会直接修改表格原行数据，和保存后的列表刷新逻辑冲突。

修复方法 #

• 统一弹窗控制变量：将模板中<v-dialog>的v-model值改为state.dialog，关闭按钮的点击事件也同步改为@click="state.dialog = false"，保证弹窗状态逻辑完全对齐。
• 调整保存后的赋值逻辑：删除state.pessoa = res.data这行代码，等await getData()拉取完最新全量列表后，再将state.pessoa重置为空初始对象即可，避免单条更新返回的数据混入列表。
• 替换行数据拷贝方式：将Object.assign({}, item)替换为深拷贝，例如state.pessoa = JSON.parse(JSON.stringify(item))，切断拷贝对象和原表格行数据的引用关联，避免编辑过程中直接修改原行数据。

内容的提问来源于stack exchange，提问作者Gabriela V.