When working with two table components, one fetching records using axios and the other needing to get records after clicking on the edit button in the parent component, I encountered issues. Despite attempting Vue's parent-to-child component communication method, it did not work as expected with the table.
<div><table class="table table-bordered table-hover">
<thead>
<tr>
<th>Request NO</th>
<th>User name</th>
<th>Product</th>
<th>Requested Quantity</th>
<th>Approved Quantity</th>
<th>Status</th>
<th>Date</th>
<th>Action</th>
</tr>
</thead> <tbody>
<tr v-for="temp in reques " >
<td>{{temp.operation_id}}{{temp.user_id}}</td>
<td>{{temp.user_id}}</td>
<td>{{temp.product_name}}</td>
<td>{{temp.rquantity}}</td>
<td>{{temp.aquantity}}</td>
<td>{{temp.status}}</td>
<td>{{temp.created_at}}</td>
<td>
<div role="group" class="btn-group">
<button class="btn btn-info" @click="edit(temp)"
type="button">
<i class="fa fa-edit"></i>
</button>
<button class="btn btn-danger" type="button">
<i class="fa fa-trash"></i>
</button>
</div>
</td>
</tr>
</tbody>
</table>div class="col">
<approved :form="form"></approved>
</div></div>
import VForm from 'vform'
import AlertError from "vform/src/components/AlertError";
import HasError from "vform/src/components/HasError";
import approved from "./approved";
import operationcreate from "./create" export default {
components: {HasError, AlertError,
approved,operationcreate,
},
data() {
return {
reques: [],
here: [],
form: new VForm({
operation_id:'',
product_name:'',
rquantity: '',
aquantity:'',
status:'',
created_at:'',
user_id:''
})
}
},
methods:{
edit(temp){
this.form.fill(temp);
}
},
created() {
axios.get('/request-list')
.then(({data}) => this.reques = data);
}
}
The second table component:
<div>
<div class="card">
<div class="card-header">
<h3 class="card-title">Quick Access</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="collapse">
<i class="fa fa-minus"></i>
</button>
</div>
</div>
<div class="card-body p-0">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th> Product Name</th>
<th> Request Quantity </th>
<th> Approved Quantity</th>
<th> Status</th>
</tr>
</thead>
<tbody>
<tr v-for="temp in form">
<td>1</td>
<td>{{temp.rquantity}}</td>
<td>{{temp.aquantity}}</td>
<td>{{temp.status}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script>
export default {
props: ['form'],
data() {
return {
}
},
methods: {},
created() {
}
}