Recently, I created a small web application to assist in organizing my project ideas. Check it out here: https://codepen.io/aibrindley/pen/ELXajM
Now, I am working on enabling users to add items to the array directly from the interface. It would also be convenient if they could remove items as well.
The code I've implemented is a combination of different techniques utilizing Vue.
One specific area to focus on is how product names are set and displayed:
<td>{{ product.name }}</td>
<td><input id="iname"/></td>
When a user clicks the button, the item gets added to the list:
function addItem() {
var iname = document.getElementById("iname").value
products[products.length + 1].name = iname
I understand that the array should ideally be set within:
new Vue({})
However, when I tried this approach, calculating the total column became unsuccessful...
If anyone could provide assistance, I would greatly appreciate it! There must be a simple solution that I'm overlooking.
Update: With the help of @Sphinx, the codepen has been updated and is now functioning correctly. Look for @click="addItemByVue();" in the HTML and addItemByVue in the JavaScript section.