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

Question

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

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

"[Vue 警告]：属性或方法 "duplicate" 未在实例上定义，但在渲染期间引用。通过初始化属性。见：https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。”

应用图片：https://imgur.com/a/DgKebPR 尝试使用的JS图片：https://imgur.com/a/EjW4t6d

  <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 中。