时间戳

首页 > 解决方案 > 如何创建添加新 Vue-Grid-Item 的按钮？

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

问题描述

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

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

“[Vue 警告]：属性或方法“重复”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件。请参阅：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>

标签： javascripthtmlvue.jsgridvuex

解决方案

我不知道确切地声明了该duplicate方法的位置。如果它没有在组件的方法中声明，不要期望它可以从模板中获得。尝试：

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

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

推荐阅读