VueJS - 一个组件，但向 2 个不同的地址发出请求

Question

我有一个组件 MainTable 来呈现一个显示任务的表：

({title: String, body: String, etc.}). 

此组件还会触发created方法钩子向我的 API 发出请求以http://localhost:3000/api/v1/tasks。

我想有一个带有指向所有complete_tasks的链接(路由(的按钮，我还想在其中呈现包含所有完整任务的相同表(因此我将其设置为组件(。

但是，这次我希望此组件向要http://localhost:3000/api/v1/tasks/complete_tasks的其他地址发出请求(以获取所有完整的任务(。

有可能做到这一点吗？

//App.vue
<template>
<div class="container">
<div class="row">
<h2>Todos</h2>
<mainTable></mainTable>
</div>
</div>
</template>
<script>
import MainTable from './components/MainTable.vue'
export default {
components: {
'mainTable': MainTable
},
methods: {
}
}
</script>
//MainTable.vue
<template>
<table class="table table-sm table-striped">
<thead>
<tr>
<th>Title</th>
<th>Content</th>
<th colspan="3"></th>
<th><select-all-button></select-all-button></th>
<th><finishButton></finishButton></th>
<br>
<th><removeAllButton></removeAllButton></th>
</tr>
</thead>
<tbody>
<tr v-for="task in tasks">
<td>{{ task.title }}</td>
<td>{{ task.content }}</td>
<td><a href="#">Show</a></td>
<td><a href="#">Edit</a></td>
<td><a href="#">Delete</a></td>
</tr>
</tbody>
</table>
</template>
<script>
import SelectAllButton from './buttons/SelectAll.vue';
import FinishButton from './buttons/FinishButton.vue';
import RemoveAllButton from './buttons/RemoveAllButton.vue';
export default {
components: {
'select-all-button': SelectAllButton,
'finishButton': FinishButton,
'removeAllButton': RemoveAllButton
},
data(){
return {
tasks: []
}
},
created(){
this.$http.get('tasks').then(function(data){
this.tasks = data.body.slice(0,20);
})
}
}
</script>

Answer 1

是的，当然，你可以做到 您可以在单击时创建方法触发器 当您按下按钮时，向终端节点发出请求并获取数据 并使用新数据更新对象任务 这清楚吗？