javascript-如何创建创建新网格项 onClick 的函数？Vuex 使用 vue-grid-layout
我正在使用 vue-grid-layout 创建一个可拖动的 tile 系统，该系统将跟踪我们研究实验室中系统执行的步骤顺序。简而言之，我可以通过硬编码创建尽可能多的网格项元素，但我需要能够创建一个函数来创建/删除其他网格项。我很困惑如何解决这个问题，因为我很擅长 JavaScript，要在 HTML 中创建一个网格项，我可以执行以下操作：
//这些只是网格项目的“设置”//
<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">
//here we actually create the grid-item, starting at [0]
<grid-item
:x=stepsGrid[0].x
:y=stepsGrid[0].y
:w=stepsGrid[0].w
:h=stepsGrid[0].h
:i=stepsGrid[0].i
:isDraggable=stepsGrid[0].isDraggable>
<div class="Panel__name">1</div>
<div class="editButton">
<router-link to="/Parameters-template" class="editButton">Edit</router-link></router-link>
</div><br>
<div class="Panel__status">Status:</div>
</grid-item>
我基本上需要知道如何单击以添加任意数量的这些，但我不确定如何对其进行编程。如果我目前有这个网格项，我需要按下一个按钮，该按钮将在以下位置创建另一个网格项：
<grid-item
:x=stepsGrid[1].x
:y=stepsGrid[1].y
:w=stepsGrid[1].w
:h=stepsGrid[1].h
:i=stepsGrid[1].i
:isDraggable=stepsGrid[1].isDraggable>
... content
</grid-item>
- 并且将从 0 增加到 1,2,3 等。我有网格布局的状态如下：
import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate'
Vue.use(Vuex);
export const store = new Vuex.Store({
//strict: process.env.NODE_ENV !== 'production',
state: {
stepsGrid : [
{"x":0,"y":0,"w":2,"h":1,"i":"0"},
{"x":2,"y":0,"w":2,"h":1,"i":"1"},
{"x":4,"y":0,"w":2,"h":1,"i":"2"},
{"x":6,"y":0,"w":2,"h":1,"i":"3"},
{"x":0,"y":2,"w":2,"h":1,"i":"4"},
{"x":2,"y":2,"w":2,"h":1,"i":"5"}
],
.......
mutations: {
state.stepsGrid = [
{"x":0,"y":0,"w":2,"h":1,"i":"0"},
{"x":2,"y":0,"w":2,"h":1,"i":"1"},
{"x":4,"y":0,"w":2,"h":1,"i":"2"},
{"x":6,"y":0,"w":2,"h":1,"i":"3"},
{"x":0,"y":2,"w":2,"h":1,"i":"4"},
{"x":2,"y":2,"w":2,"h":1,"i":"5"}
],
