Vue.js：用元素绘制table，为每一行调用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。

我需要将name字段输出到table，然后调用一个方法到后端，每个id字段对应sheet个元素，得到一个对象并补充table.

这里是调用api的方法：

  refresh(){
      Job.getJobs()
    }

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

通过这种方法，我应该 return 一个具有开始和结束字段的对象。对于这些字段，我必须将每个 scheduledList 元素添加到 tables.

我该怎么做？非常感谢您的帮助。

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>

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

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

javascript

vue.js

vuejs2

vue-component

vue-material