对 axios 请求使用动态参数

Question

axios.get("/api/session/" + this.roomId)

上面是来自我的 axios 调用的 sn-p，它使用我的 api.php 路由（'/api/session/{id} 通过控制器加载请求的特定房间 => /api/session/3 是房间 3 )。

目前，这个 sn-p 是硬编码的，并且始终使用整数 1 表示“this.roomId”。 我这样做是为了检查我的 vue 是否工作正常。

我现在的问题是，我如何为道具 roomId 使用动态参数？

所以我总是可以说类似的话

.get/.post('url', $id) ?

Answer 1

如果您将 roomId 作为 prop 传递给组件，那么您需要处理父组件中的更改。为此，我需要更多关于房间 ID 来自何处以及如何选择房间 ID 的上下文。

如果您关闭了这部分，那么您需要观察 roomId 属性的变化，并在数据发生变化时重新获取数据。你可以在你的房间组件中做这样的事情：

<script>
import axios from 'axios'

const props: {
  roomId: {
    type: Number,
    required: true
  }
}

export default {
  props,
  data() {
    return {
      room: null
    }
  },
  methods: {
    async fetchRoom() {
     try {
       const response = await axios.get(`/api/session/${this.roomId}`)
       this.room = response.data
     } catch (err) {
       // - handle error
     }
    }
  },
  watch: {
    roomId: {
      immediate: true // so it's executed when component is created
      handler: function () {
        this.fetchRoom()
      }
    }
  }
}
</script>