如何在混合Vue項目中添加/刪除數組中的行？

Question

因此，我構建了這個小Web應用程序，以幫助我確定要構建的想法的優先級。 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({})

但是這樣做會使總列求和失敗...

有人可以幫忙嗎！ 我確定我缺少一些簡單的東西。

編輯：由於@click="addItemByVue();" Sphinx，codepen已更新並可以正常工作，請參見@click="addItemByVue();" 在HTML和JS中的addItemByVue中

Answer 1

試試吧：

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