Vue.js: draw the table with elements, calling the api for each row

I have 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="Название задания" to="/upload" >{{ item.name}}</md-table-cell>
        <md-table-cell md-label="Номер билда">{{ 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>

It has a scheduleList that has the name and id fields.

I need to output the name field to the table, and then call a method that goes to the backend, with each id field for the sheet elements, gets an object and complements the table.

Here is the method that calls the api:

  refresh(){
      Job.getJobs()
    }

  getJobs: id => getRequest(`/routes/monitoring/jobs/${id}`, null)

From this method, I should return an object with the start and end fields. With these fields, I must add each scheduledList element to the tables.

How can I do this? thank you so much for your help.

1 answer

  • answered 2020-06-02 10:40 Boussadjra Brahim

    Add another computed property as v-model directive value :

     computed:{
            ...mapState(["scheduledList"]),
        scheduledListRefreshed:{
          get(){
            return this.scheduledList.map(item=>{
                     item.jobs=Job.getJobs(item.id);
                     return item;
            },
          set(val){
    
          }
        }
    

    template :

    <template>
      <div class="tableWrapper">
        <md-table
                class="scheduledListJobList"
                v-model="scheduledListRefreshed"
        >
          <md-table-row :class="item.status" slot="md-table-row" slot-scope="{item}" @click="open(item)">
            <md-table-cell class="nameColumn" md-label="Название задания" to="/upload" >{{ item.name}}</md-table-cell>
            <md-table-cell md-label="Номер билда">{{ item.jobNumber }}</md-table-cell>
    
          </md-table-row>
        </md-table>
      </div>
    </template>