I've been attempting to incorporate an "add" button feature that saves/adds/inserts data into my table. I have inputted some text in the form of tags (input type), but unfortunately, it doesn't seem to be functioning properly. Despite conducting a Google search, I haven't been able to find a solution for what I'm attempting to achieve.
Below is the code snippet from my Vue.js file:
<template>
<div>
<b-table striped hover :items="items" id="table">
</b-table>
No Product: <input type="text" id="no_product" v-model="items.product_no" /><br>
Product Name: <input type="text" id="nama_product" v-model="items.product_name" /><br>
Product Price: <input type="text" id="harga_product" v-model="items.product_price" /><br>
Product Quantity: <input type="text" id="qtt_product" v-model="items.product_qty" /><br>
Line Total: <input type="text" id="line_totall" v-model="items.line_total" /><br>
<br><br>
<b-button @click="addRow">
<i class=""></i>Add Row
</b-button>
</div>
</template>
And here is the script associated with it:
<script>
export default {
data(){
return {
items: [{
product_no: '1',
product_name: 'box',
product_price: '10000',
product_qty: '5',
line_total: 0,
}, {
product_no: '1',
product_name: 'box',
product_price: '10000',
product_qty: '5',
line_total: 0,
}]
}
},
methods: {
addRow() {
var noprod = document.getElementById('no_product').value;
var nprod = document.getElementById('nama_product').value;
var hprod = document.getElementById('harga_product').value;
var qtyprod = document.getElementById('qtt_product').value;
var lineprod = document.getElementById('line_totall').value;
var table = document.getElementsByTagName('b-table')[0];
var newRow = table.insertRow(table.rows.length);
var cel1 = newRow.insertCell(0);
var cel2 = newRow.insertCell(1);
var cel3 = newRow.insertCell(2);
var cel2 = newRow.insertCell(3);
var cel3 = newRow.insertCell(4);
cel1.product_no = noprod;
cel2.product_name = nprod;
cel3.product_price = hprod;
cel4.product_qty = qtyprod;
cel5.line_total = lineprod;
console.log(print)
},
}
}
</script>