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

Question

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

中的最后一项

使用 vue-grid-layout 来填充 grid-items/tiles，每个都是 'step' 我们的系统将运行。我能够动态添加新的 'steps'，但是我只能通过使用 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，如下图（这是一个electron app）：

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);
 },

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

"I deleted the element in array by the button and could not understand the problem, as the last element was always deleted, although the key was unique. I added an extra unique uuid and it all worked."

<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'，我在应用程序的左下角有一个 adding/removing 的按钮，用于删除我只是弹出最后一个的项目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);
    }
}

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

Remove ANY Grid-Item on the click of an 'x' button that is within each item, my method only deletes the last one

html

javascript

grid-layout

vue.js

vue-dynamic-components