0

Q) 使用 Axios 和 Vue 传递 id 并获取“Get”请求的正确方法是什么。

我有 Vue 组件，它具有数据对象和 pId -key 的值。

我已经检查过 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} "
  • 网址为：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 方面是好的。

谢谢米卡。

4

3 回答 3

0

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

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

于 2020-06-18T12:35:39.207 回答
0

包含变量的字符串需要用重音符号( ` ) 而非单引号 ( ' ) 或双引号 ( " )包裹


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>
于 2020-06-18T12:53:15.793 回答
0

终于解决了问题：

  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 传递给 Axios。

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

于 2020-06-22T10:32:58.037 回答