использовать динамические параметры для запросов axios

Question

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

Выше приведен фрагмент моего вызова axios, который использует мой маршрут api.php ('/ api / session / {id}, который загружает через контроллер запрошенную конкретную комнату => / api / session / 3 is room3).

В настоящее время этот фрагмент кодируется и всегда использует целое число 1 для this.roomId. Я сделал это, чтобы проверить, нормально ли работает мое vue.

Теперь у меня вопрос, как я могу использовать динамический параметр для моего prop roomId?

, чтобы я могвсегда говорите что-то вроде

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

Answer 1

Если вы передаете roomId как prop в компонент, то вам нужно обработать изменение в родительском компоненте. Для этого мне понадобится немного больше контекста о том, откуда берутся номера комнат и как вы выбираете номер комнаты там.

Если у вас есть эта часть внизу, то вы захотите посмотреть изменения на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>