object 在 Vue.js 中从一个元素复制到另一个元素的正确方法

Question

我是 Vue.js 的新手（我主要使用 PHP），我正在尝试创建简单的视图，用户可以在其中从一个组件添加 object 并将其副本放置到另一个组件中。

主模板

<template>
   <div class="left">
      <TaskList :tasks="tasks" v-on:pinned-add-task="pinnedAddTask" />
   </div>
   <div class="right">
      <PinnedList :pinned="pinned" />
   </div>
</template>

任务列表

<template>
  <div class="task-list">
      <div v-for="task in tasks" :key="task.id">
          <TaskItem :task="task" v-on:pinned-add-task="$emit('pinned-add-task', task)" />
      </div>
  </div>
</template>

任务项

<template>
   <div>
     <p>{{task.name}}</p>
     <button v-on:click="$emit('pinned-add-task', task)">+</button>
   </div>
</template>

据我所知，object“任务”是通过引用传递的，当我尝试创建一个空的 object 或数组并将“任务”插入到新创建的对象/数组中时，当我更改原始“任务”时，它也是在新的 object 内部进行了更改，我不希望那样。

我正在从我创建的 API 获取我的数据（任务），并且我正在使用分页系统，因此我希望能够切换页面而不会从固定页面丢失它。

我创建的代码看起来像这样，但我不喜欢它，我认为这不是一个好方法：

    pinnedAddTask(item) {
      let pQuantity = 1; // I use this value because I want to be able to pin one task multipletimes
      let left = this.pinned;
      let right = [];
      for (let task of this.pinned) {
        if(item.id == task.id) {
          pQuantity = task.quantity + 1;
          left =  this.pinned.filter(eItem => eItem.id < item.id);
          right =  this.pinned.filter(eItem => eItem.id > item.id);
        }
      }
      const clone = {...item, quantity: pQuantity};

      this.pinned = [...left, clone, ...right];
    }

任何人都可以确认或拒绝这一点吗？

Answer 1

是的，如果那只是一个浅拷贝[一级对象]，这很好。 但是如果你有一个嵌套的 object 那么你可能必须使用递归方法或使用任何外部库，如lodash