Axios 获取单个配置文件

Question

Q) 使用 Axios 和 Vue 传递 id 和获取 "Get"-request 的正确方法是什么。

我有 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/profile
没有配置文件 ID，
也试过将 id 作为参数传递，但方法不正确。
如果我硬编码配置文件 ID，我将从 Laravel、
http://192.168.10.101:8000/profile/1
所以 Laravel 一侧的路线没问题。

谢谢米卡。

Answer 1

您必须使用 `` 作为模板字符串。

所以正确的方法是：axios.get(`/profile/${this.pId}`)

Answer 2

包含变量的字符串需要用 grave accent ( ` ) 而不是单引号 ( ' ) 或双引号 ( " )


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 3

最终解决问题：

首先为 EventBus.js 创建了单独的文件。

从 'vue' 导入 Vue 导出默认新 Vue()
发件人组件：（仪表板）将道具数据转换为数据对象。

props: { pId: },

data() { return { profileId: this.pId } },
创建的方法：

{ init(){ const payload = {

profileId: this.profileId }

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

console.log('profile id sent: ', payload.profileId ); }
```
      }
```
接收器组件： 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到axios了

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

... 不需要vue-router，只是为了了解EventBus的工作原理。感谢这个link：https://medium.com/easyread/vue-as-event-bus-life-is-happier-7a04fe5231e1

Axios 获取单个配置文件

Axios get single profile

axios

vuejs2

laravel-7.x