While using Vue.js to dynamically create table rows, I encountered an issue where the price in the previous row's textbox gets cleared when adding a new row. The problem seems to be related to setting the price value only when selecting a product, but not when manually typing it in.
The desired behavior is to obtain the price value from an axios call every time a new row is added. However, currently, the price value remains unchanged if manually typed before adding a new row.
I need assistance in resolving this issue and identifying where the mistake might be in my code.
Here is a snippet of my template code:
<tr v-for="(invoice_product, k) in invoice_products" :key="k">
<td scope="row" class="trashIconContainer">
<button class="btn-outline-danger btn-sm rem_row" type="button" @click="deleteRow(k, invoice_product)"><i class="fa fa-times"></i></button>
</td>
<td>
<select id="product" name="product" v-model="invoice_product.product_name" @change="setprice($event)">
<option v-for="(spro, index) in supplierproducts" :key="index" :value="spro.id">{{ spro.name }}</option>
</select>
</td>
<td>
<input class="textbox text-right" type="text" v-model="invoice_product.product_price"
/>
</td></tr>
And here is a section of my script code:
data() {
return {
errors: {},
valid: true,
suppliers: [],
supplierproducts: [],
input: {
supplier: ""
},
invoice_subtotal: 0,
invoice_total: 0,
invoice_tax: 5,
invoice_products: [{
product_name: '',
product_price: ''
}]
}
},
methods: {
setprice(e)
{
this.axios.get('/getproduct/' + e.target.value).then((response) => {
if (response.status == 200) {
e.target.parentElement.nextElementSibling.getElementsByTagName('input')[0].value = response.data[0].price
}
else {
console.log(response.data);
}
})
},
addNewRow() {
this.invoice_products.push({});
},