Ax ios получить одинарный профиль

Question

Q) Как правильно передать идентификатор и получить запрос «Get» с помощью Ax ios и Vue.

У меня есть компонент Vue, который имеет объект данных и ключ pId со значением.

Я проверил, что pId имеет значение.

ID профиля: {{pId}}

Дает значение 1.

data() {
    return {          
      pId: ''
    }
  },
methods: { 
    loadProfile(){
        this.status = 'Loading ....';
        axios.get("/profile/${pId} ")

        .then(function(response){
           this.profile = response.data.profile;
        })
        .catch(e => {
        this.errors.push(e)
        })
      },
init(){
        console.log('Profile mounted');
        EventBus.$on('creds' , key =>{
             [this.pId, this.uId] = key;
        })
}
  mounted(){
    this.init()
  },
  created: function() {

    this.loadProfile();
  }

• Когда я передаю pId следующим образом: axios.get("/profile/${pId} "
• URL: http://192.168.10.101: 8000 / profile / $% 7BpId% 7D

• это означает, что pId - это строка, а не значение.

• Я пробовал это

  axios.get("/profile " + this.pId)

• , что дает мне http://192.168.10.101: 8000 / профиль

• без идентификатора профиля,

• также пробовал передать идентификатор в качестве параметра, но это неправильный способ.

• если я жестко закодирую идентификатор профиля, я получу профиль из Laravel,

• http://192.168.10.101 : 8000 / profile / 1

• поэтому маршрут в порядке на стороне Laravel.

спасибо Мика.

Answer 1

Строки, содержащие переменные, должны быть заключены в серьезный акцент (`) без одинарной кавычки (') или двойной кавычки (")

const myValue
const myString = `This is the value: ${myValue}`

Также используйте передаваемые реквизиты прямо с роутера:

https://router.vuejs.org/guide/essentials/passing-props.html

// ROUTER

const router = new VueRouter({
  routes: [
    { path: '/profile/:pId', component: Profile, props: true }
  ]
})

Итак, ваш код должен выглядеть следующим образом:

// Profile.vue

<template></t

<script>

export default {

  name: 'profile',

  props: ['pId'],

  methods: { 

    loadProfile() {

      const vm = this // Ensure expected scope of reference to "this" is maintained in the anonymous Axios callback functions as the component:

      const pId = this.$route.

      vm.status = 'Loading ....';

      axios.get(`/profile/${vm.pId}`)

        .then(response => {

          vm.profile = response.data.profile;

        })

        .catch(e => {

          vm.errors.push(e)

        })

    }

    init() {

      console.log('Profile mounted');

      const vm = this

      EventBus.$on('creds' , key => {
        [vm.pId, vm.uId] = key;
      })

    }

    mounted () {

      this.init()

    },

    created () {

      this.loadProfile();

    }

}

</script>

Answer 2

Окончательно решенная проблема:

1. сначала создается отдельный файл для EventBus. js.

   импорт Vue из 'vue' экспорт по умолчанию новый Vue ()

2. компонент отправителя: (Панель мониторинга) преобразование данных реквизита в объект данных.

   props: { pId: },

   data() { return { profileId: this.pId } },

3. созданные методы:

   { init(){ const payload = {

   profileId: this.profileId }

   EventBus.$emit('creds' , payload);

   console.log('profile id sent: ', payload.profileId );}

         }
   

4. Компонент приемника: data() { return { status: '', profileId:'Loading up...',

`methods: {`
   ` updateData (payload ) { `
this.profileId = payload
this.loadProfile(this.profileId);
  },
  init(){
EventBus.$on('creds', (payload) => {
this.updateData(payload.profileId)
          })
},

Наконец прошел + this.profileId to Ax ios.

loadProfile(){
        this.status = 'Loading ....';        
        axios({
        url: '/profile/' + this.profileId,
        method: 'get'
    })

... Не нужен vue -router, только чтобы понять, как работает EventBus. Благодаря этой ссылке: https://medium.com/easyread/vue-as-event-bus-life-is-happier-7a04fe5231e1

Answer 3

Вы должны использовать `` для строки шаблона.

Правильный способ: axios.get(`/profile/${this.pId}`)