Vue.js中如何将数组元素移至另一数组并删除原数组对应元素

你的现有代码存在两个核心问题：

• 点击按钮时没有传递当前要移动的单个元素，导致方法无法定位具体操作对象
• addTask方法直接把整个原数组推入目标数组，而非单个元素

以下是修正后的完整实现：

模板部分 #

<div class="main">
  <div class="toDo">
    <!-- 点击时传递当前循环的元素n -->
    <button @click="addTask(n)" class="btn" v-for="n in toDoniz" :key="n">
      {{ n }}
    </button>
  </div>
  <div class="push">
    <button class="btn" v-for="n in doneNiz" :key="n">
      {{ n }}
    </button>
  </div>
</div>

脚本部分 #

<script>
export default {
  data: function () {
    return {
      toDoniz: ["task 1", "task 2", "task 3", "task 4", "task 5", "task 6"],
      doneNiz: [],
    };
  },
  name: "HelloWorld",
  methods: {
    addTask(task) {
      // 找到当前元素在原数组中的索引
      const taskIndex = this.toDoniz.indexOf(task);
      if (taskIndex !== -1) {
        // 从原数组移除该元素（splice是Vue响应式的数组变更方法）
        this.toDoniz.splice(taskIndex, 1);
        // 将元素添加到目标数组
        this.doneNiz.push(task);
      }
    },
  },
};
</script>

关键说明 #

• 给v-for循环内的点击事件传递当前元素n，让方法明确操作对象
• 使用indexOf定位元素在原数组的位置，确保只移除目标元素
• 采用Vue官方推荐的响应式数组变更方法：splice（移除原数组元素）和push（添加到目标数组），保证DOM能实时更新

如果需要实现反向操作（从doneNiz移回toDoniz），可以复制类似逻辑，新增一个removeTask方法即可。

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