如何创建添加新的 Vue-Grid-Item 的按钮?

Question

我正在为我的大学研究部门创建一个程序，该程序用于原子层沉积系统的操作。 该程序需要能够允许用户设置自定义"食谱"，如果您愿意，每个网格项的底角都有一个带有"编辑"的按钮，并将带您到一个单独的页面，您可以在其中输入系统统计信息，如区域温度、持续时间、周期等。我们已经让可拖动的网格项工作，这样我们就可以根据需要让系统一遍又一遍地运行多个步骤，但这是我的目标，我似乎无法实现：

我们需要能够在单击按钮时添加新的"步骤"网格项，并且还需要能够删除网格项。我创建了一个按钮"New Tile"，并定义了一个我希望可以工作的函数，我试图看看是否可以复制网格项，但是当我运行程序并单击按钮时，我收到错误：

">

[Vue 警告]：属性或方法"重复"不是在实例上定义的，而是在渲染过程中引用的。通过初始化属性，确保此属性在 data 选项中或对于基于类的组件是反应性的。见：https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。

应用图片：https://i.stack.imgur.com/wMnjs.jpg 尝试使用的JS的图像：https://i.stack.imgur.com/SgCpd.jpg

<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">
<div id="duplicater"> 
<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>

<div id="bottombuttons">
<button id="resetbutton">Reset</button>
<button id="startbutton" @click="duplicate()">New Tile</button>
</div>
</div>

Answer 1

我不知道在哪里被声明为duplicate方法。如果未在组件的方法中声明，则不要期望它可从模板中使用。尝试：

methods: {
duplicate() {
/* */
}
}

在同一组件中。如果需要在多个组件之间共享，请将其放入 mixin 中。