How to clear dynamic values passed into vue-js-modal - vue.js

Question

In my vueJs project, i have a table that displays some products data from the database. When i click on a product tr, it should open a modal that displays a form to enter further details for the product clicked like so:
<table class="table table-responsive table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Product Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr v-for="prod in products" :key="prod.id">
<td>{{ prod.id }}</td>
<td>{{ prod.name }}</td>
<td><button class="btn btn-success btn-sm" #click.prevent="addStocks(prod)">Add Stock</button></td>
</tr>
</tbody>
</table>
Now in my script, i have a method to open the modal and pass the value of the item clicked to the modal like so;
addStocks(prod){
this.$modal.show('add-stocks')
this.newStock.unitPrice = prod.sellin_price
this.newStock.id = prod.id
this.newStock.name = prod.name
},
and my data object
data() {
return {
newStock: {
id: null,
name: '',
size: '',
srln: '',
colour: '',
mfg: '',
expiry: '',
selling_price: ''
},
}
}
and the modal component
<modal name="add-stocks" height="auto" :draggable="true" :width="600">
<div class="modal-header">
<h4>Add new stock</h4>
</div>
<div class="modal-body form-horizontal">
<div class="form-group">
<label for="unitPrice" class="control-label col-md-2">Unit Price</label>
<div class="col-md-4">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">₦</span>
<input class="form-control" v-model="newStock.unitPrice" readonly aria-describedby="basic-addon1">
</div>
</div>
<div style="clear:both"></div>
</div>
<div class="form-group">
//form fields here
</div>
<div class="modal-footer modal_btns">
<button class="btn btn-primary" #click.prevent="uploadStock">Save</button>
<button class="btn btn-danger" #click.prevent="cancelUpload">Cancel</button>
</div>
</modal>
Now, the issue is when i fill the fields in the modal and click on the cancel button (without saving), i expect the fields to be cleared so when i click on another product tr, i get a fresh form, but this is not the case, the details filled into the previously closed modal form displays. In the cancelUpload methods, i have cleared the fields before closing the modal;
cancelUpload(){
this.$modal.hide('add-stocks')
this.newStock.unitPrice = prod.sellin_price
this.newStock.id = prod.id
this.newStock.name = prod.name
}
When i click on the save button and after api call is made, i call this method to hide the modal but the same issue occurs as the details display when next i open another modal.
How do i fix this?

Answer 1

First of all check whether your method is called everytime the modal is being closed i.e either by clicking on cancel button,cross sign or esc key.
Next this could be the issue of vue reactivity.
An object property should be updated using set method in vue js to keep it reactive.
Hence try as below.
cancelUpload(){
this.$modal.hide('clear-stocks')
this.$set(this.newStock,unitPrice,'');
this.$set(this.newStock,id,'');
this.$set(this.newStock,name,'');
}
You can clear other properties also in the above method.
Or else in the addStocks method also you can set the rest of properties to empty.
More on Vue.set here.