Vue.js：用元素绘制表格，为每一行调用 api

Question

我有一个 Vue 组件：

<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>

它有一个带有 name 和 id 字段的 scheduleList。

我需要 output 将 name 字段添加到表中，然后调用一个进入后端的方法，使用工作表元素的每个 id 字段，获取 object 并补充表。

下面是调用 api 的方法：

  refresh(){
      Job.getJobs()
    }

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

从这个方法中，我应该返回一个带有开始和结束字段的 object。 使用这些字段，我必须将每个 scheduleList 元素添加到表中。

我怎样才能做到这一点？ 非常感谢你的帮助。

Answer 1

添加另一个计算属性作为v-model指令值：

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

      }
    }

模板：

<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>