如何在Vue中传递函数参数以使用axios发出GET请求？

Question

I'm trying to send a GET request with Vue instead of sending it with POSTMAN for my small learning project. I have this code that handels that:

<tr v-for="(cabinet, i) in cabinets">
    <td>{{ cabinet }}</td>
</tr>
<script>
const axios = require('axios');

export default {
    name: "Cabinets",
    data() {
      return {
          cabinets: []
      }
    },
    methods: {
        getCabinets($id) {
            axios({
                method: 'GET',
                url: 'user/{id}/cabinets'
            })
                .then(response => {
                    this.cabinets = response.data
                })
        }
    }
}
</script>

For some reason I'm unable to see how this should work excatly even after seeing many related questions. In POSTMAN I would do http://my.domain:PORT_NUMBER/user/815/cabinets . How would I be able to pass the id 815 and test it/show the results in Vue? When running this in Postman I get a JSON response that looks like this:

[
    {
        "idOfCabinet": 666,
        "belongToUser": 815,
        "time": "2018-06-18 11:51:22",
        "toucher": "person1",
    },
    {
        "idOfCabinet": 23,
        "belongToUser": 815,
        "time": "2019-09-11 10:51:22",
        "toucher": "person3",
    }

]

Answer 1

You can use the mounted() function of the Vue instance, it will be triggered as soon as the component is mounted

cf: https://v2.vuejs.org/v2/api/#mounted

for example:

<tr v-for="(cabinet, i) in cabinets">
    <td>{{ cabinet }}</td>
</tr>
<script>
const axios = require('axios');

export default {
  name: "Cabinets",
  data() {
    return {
      cabinets: []
    }
  },
  mounted() {
    axios({
      method: 'GET',
      // Use backticks to do string interpolation
      // Replace the id variable by the correct id definition (idk where you get it)
      url: `user/${this.$session.get('user').id}/cabinets`
    }).then(response => {
      this.cabinets = response.data
    })
  }
}
</script>

Answer 2

You can get the response using axios .

    axios.get('user/${$id}/cabinets')
      .then(response => {
        console.log(response)
        this.cabinets = response.data
    })