0

我正在为我的工程部门研究团队重新设计一个程序,我的应用程序是使用 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,并删除stepGrid 数组中的相应项:

<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 数组,所以我只能删除最后一个填充的项目。

4

1 回答 1

0

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

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

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

methods: {
    removeStep(step) {
        const index = this.stepsGrid.indexOf(step);
        if (index >= 0) this.stepsGrid.splice(index, 1);
    }
}
于 2019-08-08T21:10:06.250 回答