如何在混合Vue项目中添加/删除数组中的行？

Question

所以，我构建了这个小小的webapp来帮助我优先考虑我想要构建的想法。 https://codepen.io/aibrindley/pen/ELXajM

我现在正试图通过界面向数组中添加项目。能够移除物品也很好。

代码是使用Vue的混合方法。

只关注名称的设置和显示方式

<td>{{ product.name }}</td>
<td><input id="iname"/></td>

，点击按钮

将项目添加到列表中

function addItem() {
  var iname = document.getElementById("iname").value
  products[products.length + 1].name = iname

我知道我应该在

中设置数组

new Vue({})

但这样做会使总列失败...

请有人帮忙！我确信我缺少一些简单的东西。

编辑：感谢@Sphinx更新并运行了codepen 请参阅HTML中的@click="addItemByVue();"和JS中的addItemByVue

Answer 1

试一试：

created: {
  window.addItem = this.addItemByVue.bind(this)
}