I am working with a Vue component:
<template>
<div class="tableWrapper">
<md-table
class="scheduledListJobList"
v-model="scheduledList"
>
<md-table-row :class="item.status" slot="md-table-row" slot-scope="{item}" @click="open(item)">
<md-table-cell class="nameColumn" md-label="Task Name" to="/upload" >{{ item.name}}</md-table-cell>
<md-table-cell md-label="Job Number">{{ item.jobNumber }}</md-table-cell>
</md-table-row>
</md-table>
</div>
</template>
<script>
import { mapState } from "vuex";
import {permissionList} from "../../permission/permission";
import {Job} from "../../api";
export default {
name: "gg-jobs-list",
computed: mapState(["scheduledList"]),
mounted: function(){
this.$store.dispatch('GET_SCHEDULED_JOBS');
},
data: function () {
return {
element: null
};
},
methods: {
open(selected) {
this.$router.push({ path: '/jobs/' + selected.routeId});
},
refresh(){
Job.getJobs()
}
}
};
</script>
The 'scheduledList' contains the name and id fields.
To populate the table with the 'name' field and retrieve additional information for each entry by calling a backend API, I have created a method as shown below:
refresh(){
Job.getJobs()
}
getJobs: id => getRequest(`/routes/monitoring/jobs/${id}`, null)
Each object returned by this method should include start and end fields. The goal is to update each element in the 'scheduledList' with this additional information.
If you have any suggestions or solutions on how to achieve this functionality, I would greatly appreciate your assistance. Thank you!