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

Question

所以，我构建了这个小网络应用程序来帮助我优先考虑我想要构建的想法。 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，代码笔更新并正常工作 请参阅 HTML 中的@click="addItemByVue();"和 JS 中的addItemByVue

Answer 1

试试：

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