Vue.js:用元素绘制表，每行调用接口
Vue.js:用元素绘制表，每行调用接口
提问于 2020-06-02 18:06:31
我有一个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>它有一个scheduleList，其中包含name和id字段。
我需要将name字段输出到表中，然后调用一个转到后端的方法，其中每个id字段用于工作表元素，获取一个对象并补充表。
下面是调用api的方法：
refresh(){
Job.getJobs()
}
getJobs: id => getRequest(`/routes/monitoring/jobs/${id}`, null)在这个方法中，我应该返回一个带有start和end字段的对象。有了这些字段，我必须将每个scheduledList元素添加到表中。
我该怎么做呢？非常感谢你的帮助。
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-06-02 18:40:12
添加另一个计算属性作为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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62149558
复制相关文章
相似问题
腾讯云开发者
