时间戳

首页 > 解决方案 > 通过扩展运算符奇怪的行为创建的对象

vue.js - 通过扩展运算符奇怪的行为创建的对象

问题描述

我正在使用 Vue.js 扩展运算符来创建一个新数组并在其中找到一个将分配给selectedEmployeedata 属性的值：

selectEmployee(id) {
  const employees = [...this.employees];
  this.selectedEmployee = employees.find(employee => employee.id === id);
},

无论哪种方式，selectedEmployee通过修改值v-model也会修改保存在paginatedEmployees属性中的记录，该属性定义如下：

async fetchEmployees() {
  this.loading = true;

  try {
    const response = await axios.get('/api/employees');
    this.employees = response.data.employees;
    this.paginatedEmployees = _.chunk(this.employees, 10);
    this.pages = this.paginatedEmployees.length;
  } catch (e) {
    this.error = true;
    this.requestMessage = e.message;
  } finally {
    this.loading = false;
  }
},

知道为什么会这样吗？

标签： vue.js

解决方案

传播制作了一个浅拷贝，这意味着您有一个由相同员工组成的新数组。

您可能想要制作所选员工的副本，这样您就不会改变原始员工。

请记住，这也是一个浅拷贝，因此如果您的员工有嵌套对象，这些对象仍将引用原始对象，就像在您的数组场景中一样。这就是传播如此便宜的操作而不是深度复制/克隆的原因。

推荐阅读