Question

I have a component MainTable that renders a table in which I display Tasks:

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

This component also triggers created method hook to make a request to my API to http://localhost:3000/api/v1/tasks.

I want to have a button with a link (route) to all complete_tasks where I want to also render the same table (hence I made it a component) with all complete tasks.

This time however, I want this component to make a request to a different address to http://localhost:3000/api/v1/tasks/complete_tasks (to fetch all complete tasks).

Is it possible to achieve this?

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

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

VueJS - One component but make requests to 2 different addresses

1 个答案: