单击每个项目中的“x”按钮删除任何网格项目，我的方法只删除最后一个

Question

我正在为我的工程部门研究团队重新设计一个程序，我的应用程序是使用 Electron、Vuex、HTML/Sass/Javascript 构建的。该程序的目的是允许用户创建“步骤”，这些“步骤”是您可以进入并设置系统参数和流程以运行 X 次的项目/图块。在每个步骤中设置值和设置可能需要一段时间，因此如果用户创建了 5 个步骤，并意识到他们想要完全删除第 2 步，则每个步骤中需要有一个“删除”或一个小“x” /物品。目前，我只能使用“pop”函数删除最后填充的步骤/项，以删除数组“stepsGrid”中的最后一项。

使用 vue-grid-layout 来填充网格项/图块，这将是我们系统将运行的每个“步骤”。我能够动态添加新的“步骤”，但是我只能通过使用 pop() 从网格项所在的数组中删除最后一项来成功删除步骤。我想放一个

<button id="remove" @click="removeStep()">Remove</button>

在每个步骤中，这样我就可以删除网格上的任何项目，而不仅仅是最后一个项目。

我见过一些例子，但不是最擅长 javascript - 我没有任何运气。我尝试引用这里使用的函数：https://chrishamm.io/grid-demo/ 和https://github.com/chrishamm/vue-dynamic-grid 用于删除网格项，但是这个库比常规的 Vue-Grid-Layout 稍微复杂一些。

这是我的代码，关键是 step.i 组件，它是填充的每个项目的 ID，每个图块的角落都有一个“x”，函数需要能够识别该图块的 ID ，并从stepsGrid数组中删除对应的项：

<h2 style="color: #f6a821;">Steps</h2>
<hr class="hr" />
<grid-layout
  :layout.sync="stepsGrid"
  :col-num="8"
  :row-height="75"
  :is-draggable="true"
  :is-resizable="false"
  :is-mirrored="false"
  :vertical-compact="true"
  :margin="[50, 50]"
  :use-css-transforms="true">

<grid-item
  v-for="step in stepsGrid" :key= "step.i"
  :x="step.x"
  :y="step.y"
  :w="step.w"
  :h="step.h"
  :i="step.i"
  :isDraggable="step.isDraggable">

<div class="Panel__name">Step: {{step.i}} //displays item # on each tile
<div class="Panel__stepcount"> Loop Count: <input type="number" value="1">
 </div>
</div>
<div class="editButton">
<div class="Panel__status">Status:</div>
<button @click="removeStep()">Remove</button>


</grid-item>
</grid-layout>

//网格数组在store.js中，如下图（这是一个电子应用程序）：

import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex);

export const store = new Vuex.Store({
state: {
 stepsGrid : [
{"x":0,"y":0,"w":2,"h":1,"i":"0"}
],

mutations: {
addStep (state, step){
state.stepsGrid.push(step);
}
},

actions: {
  addStep ({state, commit}){
    const step = 
    {"x":0, "y": 1, "w": 2,"h":1,"i":String(state.stepsGrid.length) };
    commit('addStep', step);
 },

我知道我需要在此处合并使用密钥，但我不确定该怎么做。我找到了这个，但他以一种不同寻常的方式去做：

“我通过按钮删除了数组中的元素，无法理解问题所在，因为最后一个元素总是被删除，尽管键是唯一的。我添加了一个额外的唯一 uuid，一切正常。”

<dish-item v-else class="dishItem" 
v-for="(item, key) in dishes" :key="key + $uuid.v1()" :value="item"
@removeDish="$delete(dishes, key)" 
@editDish="$refs.modal.showEdit({item, key})"
/>

最后，我浏览了 Vue-Dynamic-Grid 的文件，发现他们正在使用以下方法删除项目：

methods: {
    removeElement(item) {
    if (item == this.selectedItem) {
    this.selectElement(null);
}

this.gridItems.splice(item.i, 1);
this.items.splice(item.i, 1);
breakpoints.forEach(function(size) {
    this.layouts[size].splice(item.i, 1);
    this.layouts[size].forEach(function(layout, i) {
       if (layout.i > item.i) {
         layout.i--;
        }
    });
}, this);
this.$emit("itemRemoved", item);
    }

如果有人可以提供帮助，我将不胜感激！我一直在通过这个项目学习 JS，所以如果有人有一些提示，请告诉我！谢谢

我尝试过尝试编写一个基于 Vue-Dynamic-Layout 删除项目的方法的函数，但我没有成功。截至目前，我在每个图块中都没有一个小“x”，我在应用程序的左下方有一个用于添加/删除步骤的按钮，要删除项目，我只是将最后一个项目弹出stepsGrid 数组，所以我只能删除最后一个填充的项目。

Answer 1

首先让事件处理程序知道正在点击哪个步骤

<button @click="removeStep(step)">Remove</button>

然后在数组中找到该步骤并删除它

methods: {
    removeStep(step) {
        const index = this.stepsGrid.indexOf(step);
        if (index >= 0) this.stepsGrid.splice(index, 1);
    }
}